扩展菜单在扩展前显示文本(Expanding menu shows text before expansion)

扩展菜单在扩展前显示文本(Expanding menu shows text before expansion)

我做了一个扩展菜单，它将成为我的导航菜单。 当您运行它时，文本将在未展开时显示。 这是我不想要的，我希望它隐藏，直到菜单扩展。 我试过用overflow: hidden; 但它不起作用。 JSFidlle

HTML

<div id="div1">Home</div><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

CSS

#div1{ position: fixed; width: 0; height: 0; border-bottom: 50px solid black; border-right: 50px solid transparent; float: left; color: white; font-size: 20px; vertical-align: middle; line-height: 50px; }

JQUERY

$(document).ready(function() { $("#div1").hover( function() { $(this).animate({ width: '+=800' }, 'slow' ); }, function() { $(this).animate({ width: '-=800px' }, 'slow' ); } ); });

I have made an expanding menu that will be my navigation menu. When you run it the text is showing when it isn't expanded. This is what I don't want, I want it hidden until the menu is expanded. I have tried to use overflow: hidden; but it doesn't work. JSFidlle

HTML

<div id="div1">Home</div><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

CSS

#div1{ position: fixed; width: 0; height: 0; border-bottom: 50px solid black; border-right: 50px solid transparent; float: left; color: white; font-size: 20px; vertical-align: middle; line-height: 50px; }

JQUERY

$(document).ready(function() { $("#div1").hover( function() { $(this).animate({ width: '+=800' }, 'slow' ); }, function() { $(this).animate({ width: '-=800px' }, 'slow' ); } ); });

最满意答案

您应该在一个范围中包装文本，以便您可以单独为其设置动画。 小提琴 。

HTML：

<div id="div1"><span>Home</span></div><br />

CSS：

#div1{ position: fixed; width: 0; height: 0; border-bottom: 50px solid black; border-right: 50px solid transparent; float: left; color: white; font-size: 20px; vertical-align: middle; line-height: 50px; }

JS：

$(document).ready(function() { $("#div1 span").hide(); $("#div1").hover( function() { $(this).animate({ width: '+=800' }, 'slow' ); $("span", this).show('slow'); }, function() { $(this).animate({ width: '-=800px' }, 'slow' ); $("span", this).hide('slow'); } ); });

You should wrap the text in a span so you can animate that separately. Fiddle.

html:

<div id="div1"><span>Home</span></div><br />

css:

#div1{ position: fixed; width: 0; height: 0; border-bottom: 50px solid black; border-right: 50px solid transparent; float: left; color: white; font-size: 20px; vertical-align: middle; line-height: 50px; }

js:

$(document).ready(function() { $("#div1 span").hide(); $("#div1").hover( function() { $(this).animate({ width: '+=800' }, 'slow' ); $("span", this).show('slow'); }, function() { $(this).animate({ width: '-=800px' }, 'slow' ); $("span", this).hide('slow'); } ); });