0

クラスにメソッドがあります：

function myClass(){

    this.showTab = function(){

        $('#tab-image').stop().animate(
            { left: 500 + 'px' },
            500 , function(){
                alert('end');
            }
        );

    }

}

そして、このメソッドを 2 回呼び出します。

var obj = new myClass();
obj.showTab();
$('#tab-image').css({ left: -500 + 'px' });
obj.showTab();

このコードは機能しますが、アニメーションなしで 2 回目に表示されます。うまくやるには？

4

2 に答える 2

0

animate 関数は非同期モードで実行されます。つまり、2 番目の animate は最初の animate が終了するまで待機しないため、両方が並行して実行されます。そのため、アニメーションには 2 番目のパラメーターがあります。これは、アニメーションの終了後に実行されるコールバック関数を設定するためのものです。

これはうまくいくはずです：

function myClass() {

    this.showTab = function(callback) {

        $('#tab-image').stop().animate({
            left: 500 + 'px'
        }, 500, callback);

    }

}

var obj = new myClass();
obj.showTab(function() {
    $('#tab-image').css({
        'left': -500 + 'px'
    });
    obj.showTab();
});​

または、コールバック関数の前に何か他のことをする必要がある場合:

function myClass() {

    this.showTab = function(callback) {

        $('#tab-image').stop().animate({
            left: 500 + 'px'
        }, 500, function() {
            //Insert your code here
            if(typeof callback === "function") callback();
        });

    }

}

これで問題が解決することを願っています!

于 2012-05-30T20:09:46.253 に答える
0

これは、アニメーション効果の急速な蓄積が原因だと思います。

これを防ぐためにすべきことは、2 つのパラメーターを stop() メソッドに渡すことです。

  stop(true, true)

これにより、エフェクトのキューがクリア キューになり、最後にジャンプします。

于 2012-05-30T20:54:35.810 に答える