アニメーションが終了するまでのjQueryを無効に次のボタン

StackOverflow https://stackoverflow.com/questions/3618958

  •  26-09-2019
  •  | 
  •  

質問

これはクールだと私はこれに精通しています。私は、次および前のボタンが見え滞在したいしかし、ちょうどことをクリックすることではありません。私の特定の状況では、ボタンはデザインの一部であるイメージです。私は、ユーザーがアニメーションが終了する前にクリックスルーすることができないようにしたいです。

役に立ちましたか？

解決 

$(function(){
    $("#previous").bind("click", Previous);
    $("#next").bind("click", Next);
});

function DoAnimation() {
    $("#previous,#next").unbind("click");
    $('#id').animate(
        complete: function() {
            $(this).after('<div>Animation complete.</div>');
            $("#previous").bind("click", Previous);
            $("#next").bind("click", Next);
        }
    });
}

function Previous() { }
function Next() { }

他のヒント

1つの以上の技法ます：

$(".next,.prev").click(function(){
    if ($('#my_animated_elelement').is(':animated'))
    {
        return false;
    }
})

私はonclickのハンドラが実行されたりしていないかどうかのフラグに変数MyApp.IgnoreNextPrevClicksを使用し、あなたは画像のonclickのためのJavaScriptの呼び出しを持っていると思います。

MyApp={}
MyApp.IgnoreNextPrevClicks=false;
MyApp.PrevClick=function() {
    if(MyApp.IgnoreNextPrevClicks) return;
    //real work goes here
}

今trueにjqueryのアニメーター、セットMyApp.IgnoreNextPrevClicksを呼び出す前に、アニメーションが終了する（使用jqueryのアニメーションコールバック）の後に戻ってfalseに設定します。

function btn() {
   $('#btn').one('click', function(){
     //call your animation function here.

     setTimeout(btn, animation duration);
  });
}

$('#mybtn').attr("disabled","disabled"); // to Disable Button

$('#mybtn').removeAttr("disabled"); // to Enable Disabled button
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top