文章/答案/技术大牛

发布

社区首页 >问答首页 >简单的Jquery菜单按钮重复动画，我怎样才能停止它？

问简单的Jquery菜单按钮重复动画，我怎样才能停止它？
EN

Stack Overflow用户

提问于 2013-11-28 22:54:20

回答 3查看 133关注 0票数 0

我在网站上有简单的动画。当用户将鼠标悬停在按钮上时，会出现动画(背景来自按钮)。它工作得很好，但当用户开始在按钮动画之间快速移动时，就会疯狂地在所有按钮上重复动画。

按钮：

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

我应该怎么做才能让这个按钮的动画更自然？

javascript

jquery

animation

回答 3

Stack Overflow用户

发布于 2013-11-28 23:02:35

试试这个：

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

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

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

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

});

票数 1

Stack Overflow用户

发布于 2013-11-28 23:05:03

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

票数 1

Stack Overflow用户

发布于 2013-11-28 22:57:43

使用.stop()

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20269137

复制

相似问题

问简单的Jquery菜单按钮重复动画，我怎样才能停止它？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的Jquery菜单按钮重复动画，我怎样才能停止它？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的Jquery菜单按钮重复动画，我怎样才能停止它？
EN