0

クリックするといくつかの画像が移動するボタンを作成しますが、ボタンをすばやくクリックすると、jQueryが画像の移動でエラーを作成します。だから私は .animate() 関数が終了しないまでボタンを無効にしたい. このコードを書いてみましたが、正しくありません。

var next = $('.next');

function nextAction(e){
    e.preventDefault();
    next.off('click');
    if(pellicle.css('left').replace(/[^-\d\.]/g, '') <= -(stepTotalWidth - screenWidth)){
        pellicle.animate({
            left:'0'
        },1000, function(){next.on('click', nextAction);});
    }
    else {
        pellicle.animate({
            left:'-=' + screenWidth
        },1000);
    }
}

next.on('click', nextAction);
4

2 に答える 2

1

イベントは好きなだけアタッチおよびデタッチできます。アニメーションの実行中にイベントを「オフ」にすると、クリックイン期間に問題があることを除いて、質問が何であるかわかりませんでした。

このために、デフォルトを防止する別のイベントを添付し、2 番目にアニメーションを実行することができます。

function nextAction(e){
    next.off('click.gallery'); //detach by namespace
    next.off('click', nextAction); //detach by link on function

    //Your code and again attach animation click
}


next.on('click', function(e){ 
  e.preventDefault(); 
});

next.on('click.gallery', nextAction); 
/* .gallery is not necessary if you will detach events 
by the link on the function that attached to that */

2 つ目は、pellicle.css('left')常に ***px を返すことです。その場合、regexp よりも少し速く、その場合parseInt(pellicle.css('left'), 10) || 0は常に数値が返されます。

于 2012-07-31T21:12:59.893 に答える
0

Flopsによる完璧なソリューション、ここに完全なコードがあります

//next button
function nextAction(e){
    next.off('click', nextAction); //detach by link on function
    e.preventDefault();
    if(parseInt(pellicle.css('left')) <= -(stepTotalWidth - screenWidth)){
        pellicle.animate({
            left:'0'
        },1000, function(e){next.on('click', nextAction);});
    }
    else {
        pellicle.animate({
            left:'-=' + screenWidth
        },1000, function(e){next.on('click', nextAction);});
    }
}
next.on('click', nextAction);
于 2012-08-04T17:22:00.063 に答える