Sélecteurs jQuery dans la liste des <li>

Quelqu'un peut-il me conseiller avec des sélecteurs jQuery.

J'ai une liste HTML (voir ci-dessous) avec quatre drapeau des images. Lorsqu'un utilisateur survole un drapeau par exemple l'italie, je veux de la fermeture de tous les autres trois drapeaux à 50% d'opacité.

<ul id="flags">
    <li id="German"><img src="images/flag_german.jpg" /></li>
    <li id="Italian"><img src="images/flag_italian.jpg" /></li>
    <li id="Spanish"><img src="images/flag_spanish.jpg" /></li>
    <li id="French"><img src="images/flag_french.jpg" /></li>
</ul>

OriginalL'auteur | 2009-09-04

  1. 12

    Essayez ceci:

    $(function() {
    $('#flags li').hover(function() {
        $(this).siblings().stop(true).animate({opacity:'0.5'},1000);
    }, function() {
        $(this).siblings().stop(true).animate({opacity:'1'},1000);
    });
});

    En utilisant arrêter de vous aider à prévenir l'état où vous avez roulé sur beaucoup d'éléments, et qu'ils ont mis en file d'attente en place des animations. Il efface toutes les animations dans la file d'attente pour l'élément et assigne le nouveau.

    La raison pour laquelle vous devez utiliser animer, plutôt que de fadeIn et fadeOut est à cause d'un bug bizarre avec fadeIn/fadeOut et le hover événement. N'ai pas compris ce qui provoque le bug.

    +1 pour le stationnaire et ne pas laisser les éléments disparu lorsque vous arrêtez de planer sur l'ensemble de la collection.

    OriginalL'auteur PetersenDidIt

  2. 6

    Que sur un truc comme ça (pas testé)

       $("#flags li").mouseover(function(){
      var id = this.id;
      $("#flags li").not("#"+id).animate({opacity:'0.5'},1000);
      $(this).animate({opacity:'1'},1000);
    });
    $(this).show(); demanderait moins de travail à partir de JQuery.
    Cheers seth... crois-moi essayer! rgds D
    J'ai juste corrigé une faute de frappe. La solution est tout mkoryak
    Si vous roulez sur tous les li rapidement vous allez le voir continuer à s'estomper chacun, même après que vous avez cessé de bouger la souris. Ma réponse sera fonctionnent correctement dans ce cas.
    C'est génial. C'est ce que je cherchais depuis longtemps.

    OriginalL'auteur mkoryak

  3. 1
    $('#flags li').bind('mouseover', function() {
    $('#flags li').not($(this)).fadeTo('fast', 0.5);
}).bind('mouseout', function() {
    $('#flags li').show();
});

    OriginalL'auteur staterium

  4. 0

    Vous voudrez peut-être regarder dans le les frères et sœurs sélecteur.

    Merci à tous! Réussi à le faire fonctionner, ressemble beaucoup! Ne peut pas attendre pour obtenir jusqu'à la vitesse avec jQuery! ...c'est incroyable! Merci encore Decbrad

    OriginalL'auteur Henrik Opel