jQuery悬停动画队列

Question

无法完全理解 jQuery 中的动画是如何排队和初始化的。尝试通过编写一些按钮效果来更熟悉这个概念。

我想把下面笔的代码变成一个流畅的动画（你可以看到如果你多次将鼠标悬停在按钮上会遇到一些问题），它会在 只有当有没有其他动画正在播放，然后仅在悬停动画完成时执行悬停动画。

这是我的代码：http://jsbin.com/larukayi/1/edit

提前感谢您的帮助！

Answer 1

我认为以下更改会给您带来预期的结果：

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