什麼是觸發每個鏈接只有一次翻轉的最佳方式？

Question

什麼是最好的方法來觸發每個鏈接只有一個翻轉，而不是頁面上的所有。請參閱：http://www.4pixels.com/web-design/xweb-design.html。顯然，頁面上的任何「全部」都會觸發我的翻轉。我想對每個只有自己觸發的圖像進行單獨的翻轉。希望這是有道理的。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".content #display li a .caption").hide(); 
    $(".content #display li a").mouseenter(function(){ 
    $(".content #display li a .caption").slideDown(400); 
    }); 
    $(".content #display li a").mouseleave(function(){ 
    $(".content #display li a .caption").slideUp(400); 
    }); 
}); 
</script> 

<ul id="display"> 
    <li><a href="/images/websites/PEX-BAFTA_2.jpg" rel="sexylightbox[group1]" title="Caption goes here"><img src="/images/websites/thumbs/PEX-BAFTA_2.jpg" alt="" /><div class ="caption">caption goes here</div></a></li> 
</ul> 

Answer 1

這應該對你有用。

$('.content #display li a').bind('mouseenter mouseleave',function() { 
     $('.caption', this).slideToggle(400); 
    }); 

您遇到的問題是事件會觸發，然後您使用了選擇器。使用這個返回觸發事件的元素。或多或少...

Answer 2

在您的事件處理程序中，嘗試使用$（this）.find（「。caption」）。

$(".content #display li a").mouseenter(function(){ 
    $(this).find(".caption").slideDown(400); 
}); 

Answer 3

我會使用jquery的delegate來避免多個事件處理程序。

$("#display").delegate('a', 'mouseenter mouseleave', function(){ 
    $(this).find(".caption").slideToggle(400); 
}); 

N.B我也被引誘使用類似hover intent所以如果你輕掃在屏幕上鼠標移到大量圖像的你不顯示您的用戶難看的動畫堆積。