jQuery悬停动画队列

jQuery hover animation queue

本文关键字：队列 动画 悬停 jQuery      更新时间：2023-09-26

很难完全理解jQuery中的动画是如何排队和初始化的。我试着通过编写一些按钮效果来适应这个概念。

我想把代码从下面的笔变成一个平滑的动画(你可以看到，如果你悬停在按钮多次你遇到一些问题)，执行每个动画悬停在只有当没有另一个动画进行，然后执行悬停动画只有当悬停在动画完成。

下面是我的代码:http://jsbin.com/larukayi/1/edit

提前感谢您的帮助!

我认为下面的变化会给你预期的结果:

  button1.css("cursor", "pointer").hover(
        function(){
        slideup.stop(true).animate({
          "bottom":"0px"
        }, 150, 'linear');
        slideup.delay(100).animate({
          "left":"50px"
        },150,'linear');
        slideright.delay(550).animate({
          "left":"0px"
        }, 100, 'swing');
      }, 
    function(){
        slideright.stop(true).animate({
          "left":"-50px"
        },150,'linear');
        slideup.delay(100).animate({
          "left":"0px"
        }, 150, 'linear');
        slideup.delay(100).animate({
          "bottom":"-100px"
        },150,'linear');
      });
相关文章：