jQuery Selectors in list <li>

css-selectors, jquery

Solution

Try this:

$(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 the state where you have rolled over alot of elements and they have queued up animations. It clears all the current animations in the queue for the element and assigns the new one.

The reason you need to use animate rather then fadeIn and fadeOut is because of a weird bug with fadeIn/fadeOut and the hover event. Haven't figured out what causes the bug though.

Problem

Can somebody advise me with jQuery selectors. I have a HTML list (see below) with four flag images in it. When a user rolls over a flag for example italy, I want it to fade out 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> ```

Original source