JQuery Desative o próximo botão até que a animação termine
-
26-09-2019 - |
Pergunta
Isso é legal e estou familiarizado com isso. No entanto, quero que os botões próximos e anteriores fiquem visíveis, mas não seja clique em clique. Na minha situação particular, os botões são imagens que fazem parte do design. Eu só quero que o usuário não consiga clicar antes que uma animação termine.
Solução
$(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() { }
Outras dicas
Mais uma técnica:
$(".next,.prev").click(function(){
if ($('#my_animated_elelement').is(':animated'))
{
return false;
}
})
Eu acho que você tem chamadas de JavaScript para as imagens OnClick's, use uma variável MyApp.IgnoreNextPrevClicks
Para sinalizar se os manipuladores OnClick são executados ou não.
MyApp={}
MyApp.IgnoreNextPrevClicks=false;
MyApp.PrevClick=function() {
if(MyApp.IgnoreNextPrevClicks) return;
//real work goes here
}
Agora, antes de ligar para o animador jQuery, defina MyApp.IgnoreNextPrevClicks
True, e volte para False após o término da animação (use o retorno de chamada da animação do jQuery).
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
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow