Pourquoi cette animation en mouvement ne s'arrête pas?

Question

Je créais un échantillon dans lequel nous aurions quatre blocs et quand quelqu'un survolera le bloc, il glissera vers le haut pour montrer le contenu derrière lui et quand l'événement mouseout se produira, il glissera vers le bas. C'est ce que je l'ai fait:

http://jsbin.com/oluqu4

$(".garage span").hover(function(){ 
      $(this).animate({'height':'0px'},1000); 
      //$(this).clearQueue().animate({'height':'0px'},1500); 
       }, function() {     
      $(this).animate({'height':'100px'},1000); 
    //$(this).clearQueue().animate({'height':'100px'},1500); 
      }); 

HTML

<ul class="garage"> 
    <li id="shutter1"><span>1</span></li> 
    <li id="shutter2"><span>2</span></li> 
    <li id="shutter3"><span>3</span></li> 
    <li id="shutter4"><span>4</span></li>  
    </ul> 

Le problème est l'animation ne veut pas arrêter. La raison en est que lorsque le bloc glisse, il déclenche automatiquement l'événement mouseout mais comment arrêter cela? En outre, laissez-moi savoir si je devrais créer une autre question à ce sujet, je voudrais avoir du texte derrière la durée. Je ne suis pas bon en CSS alors s'il vous plaît aidez-moi à le faire.

Answer 1

$(".garage li").hover(function(){ 
    $("span", this).animate({'height':'0px'},1000); 
     }, function() {     
     $("span", this).animate({'height':'100px'},1000); 
    }); 

Answer 2

Vous devez placer le survol sur l'élément Li plutôt que sur l'étendue. De cette façon, votre mode reste au-dessus de la zone Li même lorsque la durée a reculé. Assurez-vous simplement que votre Li a une hauteur qui laisse la place à la souris d'avoir une zone de vol stationnaire après que l'envergure rétrécisse.