0

多くのイベントを含む div があります。私は2つのことを試しました：

1- トグルの 2 番目の部分を条件付きで実行します。動作しますが、応答が完全ではなく、1 秒の遅延があります。ここでケースを単純化しました：http://jsfiddle.net/T26vF/2/

2-次に、単純なトグルで試しました。オブジェクトをクリックすると、正常に動作します。しかし、ここでの問題は、トグルの最初の部分で、背景または他のオブジェクトをクリックして最初のオブジェクトに戻るときに、2 回クリックする必要があることです (最初のクリックで 2 番目の部分が実行されます)。トグルの）。ここでケースを単純化しました：http://jsfiddle.net/T26vF/4/

$(function(){

    // THIS
    $(".arrodonit").toggle(
        function(){ $(this).children("img").animate({"width":"411px","marginLeft": "-85px","marginTop": "-80px"}, 900); 
                    $(this).siblings(".fons").fadeOut("slow");
                  },

        function(){ $(this).children("img").animate({"width":"233px","marginLeft": "0px","marginTop": "0px"}, 900); 
                    $(this).siblings(".fons").fadeIn("slow");
        }
    );

    // NOT THIS
    $(".arrodonit").click(function(e) {
        e.stopPropagation();
        $('.arrodonit').not(this).siblings(".fons").fadeIn("slow");
        $('.arrodonit').not(this).children("img").stop().animate({ "width":"233px","marginLeft": "0px","marginTop": "0px",}, 900);
        $(".mesInfo").fadeIn()
        $(".info").fadeOut()
    });

    // DOCUMENT
    $(document).click(function() {
       $('.fons').fadeIn();
       $('.arrodonit img').animate({ "width":"233px","marginLeft": "0px","marginTop": "0px"}, 900); 
    });

})

私は尋ねます:
- 私のコードの何が問題なのですか?
- 最初のケースで条件を作成すると遅延が発生するのはなぜですか?
- 2 番目の例で 2 回クリックする必要があるのはなぜですか?
- 同じアクションを実行するためのより良い方法はありますか?

4

1 に答える 1

0

これは単なるトリックstop().animate()です。一連のアニメーション イベントがある場合に使用してみてください。これにより、遅延が削減されます。

お役に立てれば

于 2012-05-10T15:09:51.760 に答える