jQuery: Show only one, not ALL on hover

I was wondering how I could make my script only apply the effect to the current List Item being hovered on instead of every List Item in the Unordered List.

Script:

<script> 
$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $("ul#navigation li div.chLeft,ul#navigation li div.chRight").show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide(function(){$(this).fadeOut(100);});
    });         
});
</script> 

Mark-up:

<ul id="navigation">
    <开发者_如何学Go;li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
</ul>

CSS:

#navigation{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
}
#navigation li{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    line-height: 45px;
}
#navigation li a{
    position: relative;
    padding: 0 21px;
    height: 45px;
    color: #780507;
    display: block;
    outline: none;
    text-decoration: none;
    line-height: 90px;  
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-shadow: 0px 0px 1px #430304;
    letter-spacing: 1px;
}
.chLeft{
    width: 30px;
    height: 75px;
    background: url('../img/sprite.png') -10px -5px no-repeat;
    float: left;
}
.chRight{
    width: 30px;
    height: 75px;
    background: url('../img/sprite.png') -100px -5px no-repeat;
    float: left;
}
.floatLeft{
    float: left;
}

---

You would use the this operator inside the event handlers so you refer to this match rather than matching all of them:

<script> 
$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $(this).find("div.chLeft, div.chRight").show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $(this).find("div.chLeft, div.chRight").hide(function(){$(this).fadeOut(100);});
    });         
});
</script> 

Testing this in jsfiddle gave some wierd effects because as it was animating the mouse would no longer be over the link so the mouseout event was firing causing a lot of ripple animations.

I changed the markup to this and its a bit more stable but its hard to tell what youre trying to achieve without seeing the graphics and the page in context:

<ul id="navigation">
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
      <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></l
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
</ul>

In this updated html snippet I have put the chLeft and chRight inside the <a> tag so that when it expands the mouse is still over it. Try the link above and see how you get on with that.

---

Modify your handlers like this:

$("ul#navigation li").mouseenter(function(){
    $(this).find("div.chLeft,div.chRight").show(function(){$(this).fadeIn(500);});
});

$(this) refers to current li and find basically says "find the divs within this li".

---

...

$("ul#navigation li").mouseenter(function(){
    $(this).find("div.chLeft").fadeIn(500);
    $(this).find("div.chRight").fadeIn(500);
    // it would be better to add them both a single class, then find that class once and apply fadeIn effect...
});

...

---

Wouldn't using $(this) help?

$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $(this).show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $(this).hide(function(){$(this).fadeOut(100);});
    });         
});

---

http://jsfiddle.net/KETBA/

^ That's how

sorry... lame description is lame