动画DIV高度的脚本突然改变了DIV的高度 [英] Script to animate height of DIV is changing the height of DIV suddenly

问题描述

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

I have the following script which was working using slideUp and slideDown effects, but isn't working properly when animating the height of a 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);
    });
});

您可以在此页面上看到它的运行情况.将鼠标悬停在导航栏中的第二个家庭"图像上.

You can see it in action on this page. Hover over the second 'home' image in the nav bar.

问题在于DIV高度上的动画似乎无法正常工作，即没有平滑的过渡，而是高度的突然变化.

The issues is that the animation on the height of the DIV doesn't appear to be working correctly, i.e. there is not a smooth transition, but rather a sudden change of height.

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

Could someone let me know why?

谢谢

尼克

推荐答案

问题是您在降低高度动画之前进行了fadingOut，而在增加高度之后进行了fadingIn.所以:

The problem is that you are doing the fadeOut before the decreasing height animation and the fadeIn after increasing the height. So:

1. 在降低div的动画高度之前，没有任何内容，因此其高度已更改为cero.
2. 动画后的高度递增yor div包含了内容，因此其高度已经为37px.

这篇关于动画DIV高度的脚本突然改变了DIV的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！