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