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

});

Answer 2

jQuery排队动画。因此，如果您快速地在具有这些交互动画的元素上进行徘徊，它将继续动画直到所有这些动画都被执行。

===========================================
| HoverIn   | starting hoverIn animation  |
| HoverOut  | ...                         |
| HoverIn   | ending   hoverIn animation  |
| HoverOut  | starting hoverOut animation |
|           | ...                         |
|           | ending   hoverOutanimation  |
|           | starting hoverIn animation  |
| ...         ...                         |
===========================================

如果要清除排队的所有动画，可以使用.stop()：

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


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

传入参数true以清除仍在当前元素上排队的所有动画。

jQuery docs on .stop()

Answer 3

使用.stop()：

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

它将停止元素上的当前队列并启动新动画。

简单的Jquery菜单按钮重复动画，我该如何阻止它？

3 个答案: