jQuery：只顯示一個，不是全部在懸停

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片段我有將chLeft和chRight放在<a>標籤內，這樣當它展開時鼠標仍然處於結束狀態。嘗試上面的鏈接，看看你如何繼續。

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

不會使用$（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);}); 
    });   
}); 

Answer 5

http://jsfiddle.net/KETBA/

^那怎麼

對不起......瘸的描述是瘸子