3

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があります。

too much recursion編集:効果を無効にして再度有効にすると、jQuery がエラーをスローし始めたことに気付きました。

前もって感謝します、

マルコ

4

2 に答える 2

7

以下のコードデモを試してください: 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();
    });
});

編集：あなたのコードでは、複数の CallBack 関数が再帰が多すぎる理由だと思います

于 2010-08-31T20:11:26.683 に答える
0

あまり改善されていませんが、ここに私の試みがあります：

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

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

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

</p>

于 2010-08-31T20:20:24.010 に答える