アニメーションが終了するまでのjQueryを無効に次のボタン
-
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
所属していません StackOverflow