JQuery selectors in the <li> list

Question

Can someone advise me with jQuery selectors.

I have an HTML list (see below) with four flag images in it. When the user flips a flag, for example, italy, I want him to reduce all the other three flags to 50% opacity.

<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>

Answer 1

Try the following:

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

By using stop, you help prevent a state in which you rolled many elements and they animated the animation in the queue. It clears all current animations in the queue for the item and assigns a new one.

, , fadeIn fadeOut, fadeIn/fadeOut hover. , .

Answer 2

( )

   $("#flags li").mouseover(function(){
      var id = this.id;
      $("#flags li").not("#"+id).animate({opacity:'0.5'},1000);
      $(this).animate({opacity:'1'},1000);
    });

Answer 3

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

Answer 4

You might want to study the siblings selector .