jquery - 如何将 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);
  });
});