Script pour animer hauteur de DIV change la hauteur de DIV soudainement

Question

je le script suivant qui fonctionnait à l'aide des effets slideUp et slideDown, mais ne fonctionne pas correctement lors de l'animation de la hauteur d'un 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); 
    }); 
}); 

Vous pouvez le voir en action sur this page. Passez la souris sur la deuxième image "maison" dans la barre de navigation. Le problème est que l'animation sur la hauteur de la DIV ne semble pas fonctionner correctement, c'est-à-dire qu'il n'y a pas de transition en douceur, mais plutôt un changement soudain de hauteur.

Quelqu'un pourrait-il me dire pourquoi?

Merci,

Nick

Answer 1

Si vous changez l'animation lorsque vous souhaitez afficher le menu à utiliser slideDown ('slow') - vous verrez un changement progressif de la hauteur. Comme dans:

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

pour le slideUp vous serez mieux faire la diapositive et cachant ensuite le menu - plutôt que la sortie en fondu le menu avant de le retirer.

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

Answer 2

Le problème est que vous faites la fadeOut avant que l'animation de hauteur décroissante et la fadeIn après avoir augmenté la hauteur. Donc:

1. avant la hauteur animée diminuant votre div n'a pas de contenu donc sa taille a déjà changé en cero.
2. après l'augmentation de la hauteur animée yor div a le contenu de sorte que sa hauteur est déjà 37px.