jQuery animer en survol, disparaître instantanément au passage de la souris?

Question

Salut, j'ai le code suivant sur mon site Web, ce qui provoque une div glisser à partir de la gauche. Cela fonctionne bien, mais quand la souris quitte la zone, je veux que la div disparaisse instantanément, au lieu d'animer l'arrière gauche à nouveau. J'ai essayé plusieurs façons de le faire, mais aucune ne semble fonctionner. Je suis sûr qu'il y a un moyen facile de le faire. Merci :)

$(document).ready(function(){ 
    $("#side-nav a").hover(function(){ 
     $text = $(this).html(); 
     $text = "#" + $text + "-box"; 
     $($text).animate({width:'toggle'},450); 
    }); 
}); 

Answer 1

.hover() prend une seconde méthode pour la partie mouseleave (woth une fonction, il fonctionne aussi bien sur mouseenteretmouseleave, comme ceci:

$(function(){ 
    $("#side-nav a").hover(function(){ 
    $("#" + $(this).html() + "-box").animate({width:'toggle'},450); 
    }, function() { 
    $("#" + $(this).html() + "-box").animate({width:'toggle'},0); 
    }); 
}); 

You can give it a try here, cela vous permet de toujours utiliser toggle, mais une durée de 0 déclenche un changement instantané de css, plutôt qu'une animation Je considérerais cependant, au lieu d'employer le HTML, employez le lien d'ancres, comme ceci:

<a href="#MyDiv"> 

Ensuite, votre code est beaucoup plus simple, comme ceci:

$(function(){ 
    $("#side-nav a").hover(function(){ 
    $(this.hash).animate({width:'toggle'},450); 
    }, function() { 
    $(this.hash).animate({width:'toggle'},0); 
    }); 
}); 

Vous utilisez le href="#id" comme #ID selector directement, et si vous vous cachez aussi l'autre élément, il est pointant via JavaScript, cela signifie que les utilisateurs sans JS sont bien mieux supportés, cela se dégradera gracieusement sans cacher le contenu.