javascript - 简单的 Jquery 菜单按钮重复动画，我怎样才能停止这个？

Question

我的网站上有简单的动画。当用户将鼠标悬停在按钮上时，会出现动画(出现按钮的背景)。它工作正常，但是当用户开始在按钮动画之间快速移动时，就会发疯并在所有按钮上重复动画。

按钮:

       <div id="menu_lewe">
          <ul>
            //BUTTON NR. 1
            <li class="menu">
                <ul>
                <li class="button"></li>
                <a href="#manifest"><li class="menu_glowne">MANIFEST</li></a>
                </ul>
            </li>

            //BUTTON NR.2
            <li class="menu">
                <ul>
                <li class="button"></li>
                <a href="#marki"><li class="menu_glowne">NASZE MARKI</li></a>
                </ul>
            </li>


          </ul>
       </div>

动画代码:

$('.button').css({'opacity':0});

$('.menu').mouseover(function(){
    $(this).find("li").animate({'opacity':1},200);
});


$('.menu').mouseout(function(){
    $('.button').animate({'opacity':0},200);
});

我应该改变什么以使这个按钮动画更自然？

Answer 1

试试这个:

$('body').on('mouseover', '.menu', function() {

  $(this).find("li").stop().animate({'opacity':1},200);

}).on('mouseout', '.menu', function() {

  $('.button').stop().animate({'opacity':0},200);

});