Momentan habe ich ein Setup, bei dem ein Benutzer auf ein Bild klickt und basierend auf diesem Bild wird ein Div ein- / ausgeblendet.

Wenn der Benutzer verrückt wird und gleichzeitig auf eine Reihe von Bildern klickt, werden mehrere Divs geladen und nicht nur die zuletzt angeforderte.

Ich habe versucht, mein Problem hier zu veranschaulichen.http://jsfiddle.net/BBgsf/

Wenn Sie auf eines dieser Bilder klicken, wird das entsprechende Div mit der Nummer geladen. Wenn Sie jedoch vor Abschluss der Animation auf andere Bilder klicken, werden auch die anderen Divs geladen.

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>

Wie kann ich verhindern, dass mehrere Divs gleichzeitig und nicht nur einzeln geladen werden?

​