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