如何將Jquery效果一次限制爲一個項目？

Question

我有一組具有懸停效果的div，但是如果將鼠標懸停在它們上面，動畫會變得雜亂無章。這是HTML：

<a> 
    <div class="project"> 
     <img src="img/projects/TrendyPhones.png" alt="project screenshot"> 
     <h3>Trendy Phones</h3> 
    </div> 
</a> 
<a href=""> 
    <div class="project"> 
     <img src="img/projects/TrendyPhones.png" alt="project screenshot"> 
     <h3>Trendy Phones</h3> 
    </div> 
</a> 
<a href=""> 
    <div class="project"> 
     <img src="img/projects/TrendyPhones.png" alt="project screenshot"> 
     <h3>Trendy Phones</h3> 
    </div> 

$(document).ready(function(){ 
    $('.project').hover(function(){ 
     $(this).find('h3').fadeIn(500); 
    }, function(){ 
     $(this).find('h3').fadeOut(500); 
    }); 
}); 

Answer 1

開始新的人之前嘗試.stop()正在運行的動畫。

$(document).ready(function(){ 
    $('.project').hover(function(){ 
    $(this).find('h3').stop().fadeIn(500); 
    }, function(){ 
    $(this).find('h3').stop().fadeOut(500); 
    }); 
});