JQuery предотвращает многократные щелчки, пока анимация не сделана

В настоящее время у меня есть кое-что настроенное, когда пользователь нажимает на изображение, и на основе этого изображения div постепенно исчезает / исчезает.

Если пользователь сходит с ума и одновременно нажимает на кучу изображений, загружается несколько div, а не только последнее запрошенное.

Я попытался проиллюстрировать мою проблему здесь.http://jsfiddle.net/BBgsf/

При нажатии на любое из этих изображений будет загружен соответствующий div с номером. Но если вы щелкнете по разным изображениям до завершения анимации, он загрузит и другие элементы div.

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>

Как я могу предотвратить загрузку нескольких div'ов, а не по одному?

Ответы на вопрос(2)

Ваш ответ на вопрос