3

限られた時間で、divを上下にすばやく連続してアニメーション化しようとしています。これはjqueryで機能して実現しますが、非常に面倒です。

 $('.wiggle').delay(1800).show(50).animate({
                top: '15'
                              }, 40, function() {
                                 $('.wiggle').animate({
                                 top: '12'
                                 }, 40, function() {
                                    $('.wiggle').animate({
                                    top: '15'
                                    }, 40, function() {
                                        $('.wiggle').animate({
                                        top: '12'
                                        }, 40, function() {
                                            $('.wiggle').animate({
                                            top: '15'
                                            }, 40, function() {
                                                $('.wiggle').animate({
                                                top: '12'
                                                }, 40, function() {
                                                    $('.wiggle').animate({
                                                    top: '15'
                                                    }, 40, function() {
                                                        $('.wiggle').animate({
                                                        top: '12'
                                                        }, 40, function() {
                                                            $('.wiggle').animate({
                                                            top: '15'
                                                            }, 40, function() {
                                                                $('.wiggle').animate({
                                                                top: '12'
                                                                }, 40, function() {
                                                                    $('.wiggle').animate({
                                                                    top: '14'
                                                                    }, 40, function() {
                                                                        $('.wiggle').hide(50)
                                                                     });
                                                                 });
                                                             });
                                                         });
                                                     });
                                                 });
                                             });
                                         });
                                     });
                                 });
                             }); //end wiggle

私はそれが悪いことを知っています。これを実現するための独自の関数を作成したいのですが、どこから始めればいいのか迷っています。

4

4 に答える 4

4 
$('.wiggle').delay(1800).show(50).wiggle(12);

$.fn.wiggle = function(i) {

    var $elem = $(this);

    if (i > 0) {

        $elem.animate({
            top: i % 2 == 0 ? 15 : 12
        }, 40, function() {

            $elem.wiggle(i--);
        });
    }
}
于 2012-08-10T19:23:16.367 に答える
1

テストされていませんが、次のような関数を設定する必要があると思います（「混乱」で判断するのはかなり難しいため、これが希望どおりに機能するかどうかはわかりませんが、アイデアが得られるはずです）。

function doWiggle($elem, numberOfTimesToWiggle)
{
    $elem.animate({
        top: '15'
    }, 40, function() {
        top: '12'
    }, 40, function() {
        doWiggle($elem, (numberOfTimesToWiggle-1));
    });

}

setTimeout(function() {
    show(5);
    doWiggle($('.wiggle'), 20);
},1000);
于 2012-08-10T19:21:38.707 に答える
1

エフェクトを全体的に実行する時間を決定してから、アクションを単一の関数にカプセル化して、繰り返しと停止を処理することをお勧めします。

function wiggle(selector, duration_of_wiggle) {
    var wiggle_active = true;
    var target = $(selector);
    setTimeout(function () {
        wiggle_active = false;
        target.hide();
    }, duration_of_wiggle);
    var one_wiggle_down = function () {
        if (!wiggle_active)
            return;
        target.animate({
            top: '15'
        }, 40, one_wiggle_up);
    };    
    var one_wiggle_up = function () {
        if (!wiggle_active)
            return;
        target.animate({
            top: '12'
        }, 40, one_wiggle_down);
    };
    one_wiggle_down();
};

wiggle('.wiggle', 1000);

ここで試してみてください：http：//jsfiddle.net/P4H9c/1/

于 2012-08-10T19:27:28.403 に答える
0

選択したオブジェクトを変数に保存することから始めます。これにより、パフォーマンスが向上します。

var $wiggle = $('.wiggle');

$wiggle.delay(1800).show(50).animate({
            top: '15'
                          }, 40, function() {
                             $wiggle.animate({ //and so on..

2番目セレクターを改善します。要素に関連するhtmlが常に同じであるdiv場合は、これを実行できます。

var $wiggle = $('div.wiggle')

第三に、私があなたのコードで見たもののために、あなたはバウンス効果を達成しようとしている、または上下に移動しようとしていますメソッドで関数をラップし、次のようなことをします

function bounce(wiggle) {
    for (i = 1; i < 5; i++) {
        if (i % 2 == 0) {
        wiggle.animate({
            top: '12px'
        }, 75);
    }
    else if (i % 3 == 0) {
        paquete.animate({
            top: '15px'
        }, 75);
    }
    }
  wiggle.hide();
}

次に、関数を呼び出しました

var $wiggle = $('.wiggle');

bounce($wiggle);
于 2012-08-10T19:14:17.160 に答える