Événement jQuery Hover, empêche la fonction d'être entièrement exécutée

Question

Tout d'abord, je trouve celui-ci un peu difficile à expliquer, car l'anglais n'est pas ma langue maternelle. Alors excusez le désordre.

J'ai écrit une petite fonction de notification, qui est déclenchée sur le formulaire. Comportement normal est:

• utilisateur soumet le formulaire
• Remarque fane dans
• délai de 2 secondes
• Remarque disparaît

Lorsque la note est plané, il se dilate par css-transition. Logiquement, il ne devrait pas disparaître jusqu'à ce que l'utilisateur l'efface par mouseleave. Et voici mon problème: Comment puis-je empêcher l'instruction fadeOut d'être exécuté, tant que le div est plané?

J'ai essayé quelque chose comme

if ($('#notification').hover()){ 
    return ; 
} 

mais bien sûr, la première déclaration est déjà excuted comme indiqué ici:

http://jsfiddle.net/6DsJb/

J'ai aussi essayé quelques autres choses, comme un séparé de script qui écoute sur l'événement hover, puis en appelant $('#notification').show() ;

Aucune des deux ne fonctionne. Je sais que c'est une simple erreur de raisonnement, mais bon sang, je suis coincé.

Merci d'avance.

Answer 1

Après l'appel fadeInsetTimeout, avec une fonction:

• Si les notifications se sont effondrés, le cacher.
• Sinon, utilisez .mouseleave pour le masquer dès qu'il perd le focus de la souris.

-à-dire:

$('#notification').fadeIn(500); 

setTimeout(function() { 
    if (notification_is_collapsed) 
    $('#notification').fadeOut(500); 
    else 
    $('#notification').mouseleave(function() { 
     $('#notification').fadeOut(500); 
    }); 
}, 2000); 

Answer 2

fonction Hover prend 2 paramètres: lorsque la souris entrer, et lorsque la souris sort (http://api.jquery.com/hover/)

vous pouvez donc faire quelque chose comme ceci:

$('#notification').hover(
function() {}, function() { 
    $(this).delay(500).fadeOut(500); 
}); 

ici est votre jsFiddle mise à jour: http://jsfiddle.net/6DsJb/1/