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?

​