fade in/out hover par jQuery

Question

J'essaie d'ajouter un simple effet de fondu entrant/sortant aux boutons de jQuery, mais je suis un peu coincé avec l'effacement. J'utilise ce code:

$('#header #menu li a').hover(function() { 
    $(this).fadeOut(0).addClass('hover').fadeIn(300); 
}, 
function() { 
    $(this).fadeOut(0).removeClass('hover').fadeIn(0); 
}); 

Il ajoute une classe de vol stationnaire qui définit un fond css et à la décoloration de l'image de vol stationnaire dans Mais quand je me déplace un curseur sur le bouton, il disparaît tout simplement que normalement, sans estomper..

Pouvez-vous m'aider s'il vous plaît?

Merci beaucoup pour toutes les réponses

Answer 1

Ces deux fonctions sont opposés les uns des autres, doivent donc travailler ... (code mis à jour)

$('#header #menu li a').hover(function() { 
    $(this).fadeOut(0).addClass('hover').fadeIn(300); 
}, 
function() { 
    $(this).fadeOut(300) 
     .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() }); 
}); 

C'est assez laid ... Voir ce en action au http://jsfiddle.net/zS6ex/.

Cependant, vous avez toujours un problème: vous avez désactivé le le lien entier dans ou hors, pas seulement l'image. Autant que je sache, vous ne pouvez pas définir l'opacité d'image de fond séparément (le réglage de l'opacité complète est déjà pénible si vous le faites manuellement ...)

Answer 2

Comme répondu plusieurs fois ici sur SO, vous devez utiliser le callbacks de jQuery fx methods pour faire quoi que ce soit après une animation est terminée.

$('#menu li a').hover(function(){ 
    $(this).fadeOut('fast', function(){ 
     $(this).addClass('hover').fadeIn(300); 
    }); 
}, function(){ 
}); 

Quoi qu'il en soit, appelant .fadeOut(0) disparaîtrait à cet élément sans animation du tout, comme instantanée. Le premier paramètre est la durée.

http://api.jquery.com/fadeOut/

Answer 3

Pourquoi vous cachez-vous tout simplement pas tout en ajoutant la classe depuis fadeOut (0) ne marche pas avoir une animation

$('#header #menu li a').hover(function() { 
    $(this).hide().addClass('hover').fadeIn(300); 
}, 
function() { 
    $(this).hide().removeClass('hover').show(); 
    // as there is no fading time the line above will be equal to 
    $(this).removeClass('hover'); 
}); 

lorsque vous avez besoin quelque chose faite après une animation est terminée, vous devez utiliser callback $(...).fadeIn(400,function(){ alert('this is the callback'); }, si vous n'utilisez pas le rappel, le code est exécuté pendant le déroulement de l'animation.

et je ne sais pas si son USEFULL mais il y a une classe pseudo :hover css, voir here

: hover pseudo-classe est prise en charge dans tous les principaux navigateurs.

donc avec ce que vous pouvez faire différentes choses comme:

#header #menu li a:hover { ...set style of 'a' when over 'a' } 
#header #menu li:hover a { ...set style of 'a' when over 'li' } 

simplement jouer avec un peu et vous pouvez faire beaucoup avec juste