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