Reputation:

jQuery Selectors in list <li>

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>

Upvotes: 4

Answers (4)

PetersenDidIt

Reputation: 25610

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.

Upvotes: 12

staterium

Reputation: 1978

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

Upvotes: 1

Henrik Opel

Reputation: 19441

You might want to look into the siblings selector.

Upvotes: 0

mkoryak

Reputation: 57928

What about someting like this (not tested)

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

Upvotes: 6

jQuery Selectors in list &lt;li&gt;

Answers (4)

Related Questions

jQuery Selectors in list <li>