Script to animate height of DIV is changing the height of DIV suddenly

问题

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.

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?

Thanks,

Nick

回答1:

If you change the animation when you want to reveal the menu to use slideDown('slow') - you will see a gradual change of height. As in:

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

for the slideUp you will be better off doing the slide and then hiding the menu - rather than fading out the menu before removing it.

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

回答2:

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

1. before the animated height decreasing your div hasn't any content so its height has already changed to cero.
2. after the animated height increasing yor div has the content so its height is already 37px.

来源：https://stackoverflow.com/questions/8464707/script-to-animate-height-of-div-is-changing-the-height-of-div-suddenly