Question

我有以下脚本使用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);
    });
});

您可以在this page上看到它的实际效果。将鼠标悬停在导航栏中的第二个“主页”图像上。

问题在于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。所以：

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

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

2 个答案: