jQuery：ホバー上にALLを表示するのではなく、1つだけ表示する

Question

どのようにして、スクリプトは順序付けされていないリストのすべてのリスト項目ではなく、現在のリスト項目に効果を適用することができますか？

スクリプト：

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

マークアップ：

<ul id="navigation"> 
    <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; 
} 

Answer 1

あなたではなく、それらのすべてに一致するよりも、この試合を参照してくださいので、あなたは、イベントハンドラ内this演算子を使用します。

<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は、マウスをアニメートしていたときにリンク上に表示されなくなり、mouseoutイベントが発生して大量のリップルアニメーション。

私はこれにマークアップを変更し、そのもう少し安定しているが、コンテキスト内のグラフィックスやページを見ることなくyoureの達成しようとして何を言うのはそのハード：

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

私が持っているこの更新されたHTMLスニペットで<a>タグの内側にchLeftとchRightを入れて、マウスがまだ伸びているようにします。上記のリンクを試して、どのようにそれを乗り越えてください。

Answer 2

変更し、あなたのハンドラ：

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

$(this)現在liを参照し、見つける基本的に "このli内divsを見つける" と言います。

Answer 3

...

$("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... 
}); 

...

Answer 4

$（これ）のヘルプを使用しないでしょうか？

$(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);}); 
    });   
}); 

Answer 5

http://jsfiddle.net/KETBA/

^それは

申し訳ありません...ラメ説明は、あなたのコード内で