jQuery zapobiega wielokrotnym kliknięciom aż do zakończenia animacji

Obecnie mam coś do skonfigurowania, gdzie użytkownik klika na obraz i opiera się na tym obrazie, div będzie zanikać / znikać.

Jeśli użytkownik zwariuje i kliknie kilka obrazów w tym samym czasie, ładuje się wiele divów, a nie tylko ostatni żądany.

Próbowałem tu zilustrować mój problem.http://jsfiddle.net/BBgsf/

Kliknięcie dowolnego z tych obrazów spowoduje załadowanie odpowiedniego div z numerem. Ale jeśli klikniesz na różne obrazy przed zakończeniem animacji, załaduje się także inne divy.

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>

Jak mogę zapobiec ładowaniu wielu divów, a nie pojedynczo?

questionAnswers(2)

yourAnswerToTheQuestion