改善這個連續的jQuery動畫

我剛剛在jQuery中創建了一個簡單的，連續的bounce effect，但我覺得代碼不是全部優化的，而是希望改進它。改善這個連續的jQuery動畫

var $square = $("#square"); 
bounce(); 
function bounce() { 
    $square.animate({ 
     top: "+=10" 
    }, 300, function() { 
     $square.animate({ 
      top: "-=10" 
     }, 300, function() { 
      bounce(); 
     }) 
    }); 
} 

$square.hover(function() {   
    jQuery.fx.off = true; 
}, function() { 
    jQuery.fx.off = false; 
});

所有我所做的基本上是建立，增加了+10到頂部的元素座標的動畫，並作爲一個回調函數，我減去10從頂部座標..

這會產生（幾乎平滑）反彈效果，但我感覺可以改進。

此外，我想停止動畫mouseenter，並讓它繼續mouseleave。

stop(true, true)沒有工作，也沒有dequeue()所以我使出所有打開動畫效果關閉使用jQuery.fx.off = true（愚蠢的，不是嗎？）

我會很感激這是如何能夠優化任何反饋。

這是jsFiddle。

編輯：我剛剛意識到，jQuery已經開始拋出too much recursion錯誤時禁用和重新啓用效果。

由於提前，

馬爾科

來源

2010-08-31 Marko

我想，通過調用反彈（）內本身的回調，在過多的遞歸誤差產生較大的堆棧跟蹤，因此結果。 – softcr 2010-08-31 20:12:40

遞歸太多的問題是遞歸太多。 – 2010-08-31 20:26:25

是@Neil - 爲了理解遞歸，你必須先理解遞歸。 – Marko 2010-08-31 20:59:52

請嘗試下面的代碼演示：http://jsfiddle.net/LMXPX/

$(function() { 
    var $square = $("#square"),flag = -1; 
    var timer = bounce = null; 
    (bounce = function() { 
     timer = setInterval(function() { 
      flag = ~flag + 1; 
      $square.animate({ 
       top: "+="+(flag*10) 
      }, 300) 
     },300); 
    })();     
    $square.hover(function() {   
     clearInterval(timer); 
    }, function() { 
     bounce(); 
    }); 
});

編輯：我想在你的代碼有多個回調函數過的原因多遞歸

來源

2010-08-31 20:11:26

所以沒有回調，是否有另一種方法來連續循環動畫？ – Marko 2010-08-31 20:58:54

@marko如果你看到我的答案，它不使用回調 – 2010-08-31 21:04:54

**打頭**對不起，它是早上9點，我剛醒來:)這完美的接受。 – Marko 2010-08-31 21:09:00

沒有太大的改善，但在這裏'我的嘗試：

var $square = $("#square"); 

(function loop() { 
    $square 
     .animate({ top: "+=10" }, 300) 
     .animate({ top: "-=10" }, 300, loop); 
})(); 

$square.hover(function() { 
    $.fx.off = !$.fx.off; 
});

來源

2010-08-31 20:20:24

起初我想寫同樣的代碼，但它導致了太多的遞歸，callBack函數是遞歸太多的原因:( – 2010-08-31 20:24:13

謝謝@Marko - @ Avinash的答案解決了它！Hvala puno :) – Marko 2010-08-31 21:14:55

改善這個連續的jQuery動畫

回答

相關問題