Actualmente tengo algo configurado donde un usuario hace clic en una imagen y, a partir de esa imagen, un div se desvanecerá / desvanecerá.

Si el usuario se vuelve loco y hace clic en un grupo de imágenes al mismo tiempo, se cargan varios divs en lugar de solo el último solicitado.

He tratado de ilustrar mi problema aquí.http://jsfiddle.net/BBgsf/

Al hacer clic en cualquiera de esas imágenes se cargará el div correspondiente con el número. Pero si hace clic en diferentes imágenes antes de que se complete la animación, también se cargarán los otros divs.

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>

¿Cómo puedo evitar que los múltiples divs se carguen en lugar de solo uno a la vez?

​