动画DIV高度的脚本突然改变了DIV的高度

我有以下脚本使用slideUp和slideDown效果，但在动画DIV的高度时无法正常工作：

$(function () { var myTimer, myDelay = 500; $('.slide, .the_menu').hover(function () { //when either a `img.menu_class` or a `.the_menu` element is hovered over, clear the timeout to hide the menu and slide the menu into view if it already isn't clearTimeout(myTimer); $('.the_menu').animate({height:'37px'},'fast', function () { $('.the_menu').stop(true, true).fadeIn('slow'); }); }, function () { //when either a `img.menu_class` or a `.the_menu` element is hovered out, set a timeout to hide the menu myTimer = setTimeout(function () { $('.the_menu').stop(true, true).fadeOut('slow', function () { $('.the_menu').animate({height:'0px'},'fast'); });}, myDelay); }); }); 

您可以在此页面上看到它。 将鼠标hover在导航栏中的第二个“主页”图像上。

问题是DIV高度上的动画似乎没有正常工作，即没有平滑过渡，而是突然改变高度。

有人能让我知道为什么吗？

谢谢，

缺口

Answer 1

如果您想要显示菜单以使用slideDown（’slow’）时更改动画 – 您将看到高度的逐渐变化。 如：

  $('.the_menu').slideDown({height:'37px'},'slow', function () { $('.the_menu').stop(true, true).fadeIn('slow'); }); 

对于slideUp，你最好不要做幻灯片然后隐藏菜单 – 而不是在删除之前淡出菜单。

http://jsfiddle.net/amelvin/cfFTU/

Answer 2

问题是你在降低高度动画之前进行fadeOut，在增加高度之后进行fadeIn。 所以：

1. 在动画高度降低之前，你的div没有任何内容，所以它的高度已经改为cero。
2. 在动画高度增加之后，yor div具有内容，因此它的高度已经是37px。