5

現在、ユーザーが画像をクリックし、その画像に基づいて、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>

一度に1つだけではなく、複数のdivが読み込まれないようにするにはどうすればよいですか？

</ p>

4

2 に答える 2

8

あなたはすでに答えを得ていますが.. :animatedセレクターを使用してアニメーション化されている要素があるかどうかを確認することができます..そして return false がある場合

$(".flow-chart img").click(function() {
    if ($(".hide_show").filter(':animated').length > 0) {
        return false;
    }
    var div_class = $(this).data("class");    
    $(".hide_show:visible").fadeOut('slow', function() {
        $("." + div_class).fadeIn("slow");
    });

});​

http://jsfiddle.net/FaKBs/

于 2012-12-04T19:50:20.293 に答える
7

これを行う 1 つの方法は、アニメーションが現在アクティブかどうかを追跡することです。これを行う簡単な方法は次のとおりです。http://jsfiddle.net/QCWgR/

var active = false;

$(".flow-chart img").click(function () {
    if (active) {
        return;
    }
    active = true;        
    var div_class = $(this).data("class");

    $(".hide_show:visible").fadeOut('slow', function() {
        // note the callback that sets active to false at end of animation
        $("."+div_class).fadeIn("slow", function() { active = false; });
    });

});

このアプローチでは、次のクリックが発生する前に、最初のクリックでアニメーション サイクルが完了する必要があります。

クロージャを使用してグローバル名前空間からアクティブに保つ

グローバル名前空間からアクティブに保つには、次のように匿名クロージャー内でブロック全体を実行できます。

http://jsfiddle.net/QCWgR/2/

(function () {
    var active = false;

    $(".flow-chart img").click(function () {
        if (active) {
            return;
        }
        active = true;        
        var div_class = $(this).data("class");

        $(".hide_show:visible").fadeOut('slow', function() {
            $("."+div_class).fadeIn("slow", function() { active = false; });
        });

    });
})();​
于 2012-12-04T18:56:14.933 に答える