Jqueryエフェクトを一度に1つのアイテムに制限する方法はありますか？

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