O jQuery impede vários cliques até que a animação seja concluída
Atualmente eu tenho algo de configuração onde um usuário clica em uma imagem e com base nessa imagem, um div vai desaparecer / desaparecer.
Se o usuário enlouquecer e clicar em várias imagens ao mesmo tempo, vários divs carregam, em vez de apenas o último, solicitado.
Eu tentei ilustrar meu problema aqui.http://jsfiddle.net/BBgsf/
Clicar em qualquer uma dessas imagens carregará o div correspondente com o número. Mas se você clicar em imagens diferentes antes que a animação seja concluída, ela carregará os outros divs também.
jQuery
$(".flow-chart img").click(function () {
var div_class = $(this).data("class");
$(".hide_show:visible").fadeOut('slow', function() {
$("."+div_class).fadeIn("slow");
});
});
HTML
<div class="1 hide_show">1</div>
<div class="2 hide_show" style="display: none">2</div>
<div class="3 hide_show" style="display: none">3</div>
Como posso evitar que várias divs sejam carregadas, em vez de apenas uma por vez?