jQuery Animation Delay

Question

Je travaille sur un petit peu de fonctionnalité pour trois éléments à onglets similaires. Fondamentalement, quand vous survolez un, je veux que l'opacité des deux frères et sœurs passe à 50%. Je mis en place un joli événement hover jQuery de base, voici le code de la page ...

<div id="footer"> 
    <a href="#" class="footer-tabs" id="footer-seek">Seek</a> 
    <a href="#" class="footer-tabs" id="footer-experience">Experience</a> 
    <a href="#" class="footer-tabs" id="footer-gain">Gain</a> 
</div> 

... et les JS correspondants:

$('.footer-tabs').hover(
    function() { 
     $(this).siblings().animate({ opacity: .5 },500); 
    }, 
    function() { 
     $(this).siblings().animate({ opacity: 1 },500); 
    } 
); 

Lorsque vous passez la souris sur un tout fonctionne très bien, mais quand vous passez de l'un à l'autre, les frères et sœurs ne s'assombrissent pas simultanément. J'ai fait un screencast rapide pour référence. Je suis sûr qu'il existe un moyen simple de le faire fonctionner correctement, mais je ne suis pas à la hauteur. Merci d'avance.

Screencast: http://dl.dropbox.com/u/1762184/example.mp4

Answer 1

Vous voulez annuler tout dans les animations de processus sur les frères et sœurs. C'est pour cela que la fonction stop() est destinée.

$('.footer-tabs').hover(
    function() { 
     $(this).siblings().stop().animate({ opacity: .5 },500); 
    }, 
    function() { 
     $(this).siblings().stop().animate({ opacity: 1 },500); 
    } 
); 

Answer 2

Essayez ceci:

$('.footer-tabs').hover(
    function() { 
     $(this).siblings().animate({ opacity: .5 },"fast"); 
    }, 
    function() { 
     $(this).siblings().animate({ opacity: 1 },"fast"); 
    } 
);