0

入力テキストフィールドを持つ div コンテナがあります。この入力のフォーカス/ぼかしイベント リスナーに、フォーカス インとフォーカス アウトのアニメーションを追加しました。ただし、この div コンテナーの任意の場所をクリックすると、その入力自体にフォーカスするのと同じように入力を動作させたい (したがって、入力が既にフォーカスされている場合は再フォーカスしません)。

これは問題を説明するはずです

    $("#foo1").click(function() {
       //WARNING: #foo2 will blur first THEN focus 
       $("#foo2").focus();
    });

    $("#foo2").focus(function() {
        $("#foo1").addClass("active",1000);
    });
    $("#foo2").blur(function() {
        $("#foo1").removeClass("active",1000);
    });
4

2 に答える 2

1

アニメーションが既にアクティブになっている場合は、アニメーションを再適用しないでください

$(function(){
    $("#foo1").click(function() {
        //WARNING: #foo2 will blur first THEN focus 
        $("#foo2").focus();
    });

    $("#foo2").focus(function() {
        //dont reapply
        $("#foo1:not(.active)").addClass("active",1000);
    });
    $("#foo2").blur(function() {
        $("#foo1").removeClass("active",1000);
    });

});

参照: http://jsfiddle.net/g5c7d/6/

于 2013-09-17T15:16:37.710 に答える
1

.clearQueue()を使用する

.clearQueue() メソッドが呼び出されると、実行されていないキュー上のすべての関数がキューから削除されます。

js

$(function(){
    $("#foo1").click(function() {
        //WARNING: #foo2 will blur first THEN focus 
        $("#foo2").focus();
    });

        $("#foo2").focus(function() {
            $("#foo1").clearQueue().addClass("active",1000);
        });
        $("#foo2").blur(function() {
            $("#foo1").clearQueue().removeClass("active",1000);
        });


});

デモ

于 2013-09-17T14:58:57.043 に答える