16

デモを参照してください: jsFiddle

  • 「表示」/「キャンセル」をクリックすると切り替えられる単純なフォームがあります
  • すべて正常に動作しますが、フォームが表示された直後に [キャンセル] をクリックすると、アニメーションが始まるまでに 2 ～ 3 秒の遅延が発生します。
  • 「キャンセル」をクリックする前に数秒待った場合、これは起こりません。
  • この遅延は、テスト済みのすべてのブラウザー (つまり、ff、chrome) で発生します。

1. このラグの原因と、それを防ぐ方法は?

2. この一連のアニメーションをコーディングするための、遅延を防ぐためのより良い方法はありますか?

HTML :

<div id="newResFormWrap">
    <form id="newResForm" action="" method="post" name="newRes">
        <div id="newResFormCont">
            <h3>title</h3>
            <p>form!</p>
            <div class="button" id="cancelNewRes">Cancel</div>
        </div>
    </form> 
</div>
<div class="button" id="addRes">show</div>

jQuery:

$("#newResForm").css({opacity: 0});

$("#addRes").click(function () {
    toggleNewRes()
});
$("#cancelNewRes").click(function () {
    toggleNewRes()
});

//toggleNewRes
function toggleNewRes() {
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
        $("#addRes").animate({ opacity: 0 }, 'fast', function() {
            $("#newResFormWrap").toggle('fast', function (){
                $("#newResForm").animate({ opacity: 100 },2000);
            });
        });
    } else { //if visible
        $("#newResForm").animate({ opacity: 0 }, 100,function() {
            $("#newResFormWrap").toggle('fast', function (){
                $("#addRes").animate({ opacity: 100 });
            });
        });
    }
}
4

4 に答える 4

36

で新しいアニメーションを開始するときは、必ずキューをクリアしてくださいstop():

$("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
        $("#newResFormWrap").toggle('fast', function (){
            $("#addRes").animate({ opacity: 100 }); 
                 // ...

遅延の原因は、長い 2 秒のアニメーション$("#newResForm").animate({ opacity: 100 },2000)がまだ終了していないことです。JQuery はデフォルトでアニメーションをキューに入れ、1 つのアニメーションが終了するのを待ってから次のアニメーションを開始します。でキューをクリアしますstop()。これは、矛盾する 2 つのアニメーション (開閉アニメーション、マウスオーバー/マウスアウト アニメーションなど) がある場合に特に便利です。stop()実際、他の場所で発生した可能性のある以前のアニメーションと一緒にキューに入れたい場合を除き、すべてのアニメーション チェーンを最初から開始することをお勧めします。

より高度なトピックに入ると、別のキューに名前を付けることもできます。これにより、たとえば、ホバー アニメーションと展開/折りたたみアニメーションが目的のために別々に扱われますstop()。詳細については、http://api.jquery.com/animate/ のオプションqueue(文字列を指定した場合) を参照してください。

于 2013-01-30T20:52:31.237 に答える
1

animate 呼び出しの前に追加.stop()します。

function toggleNewRes() {
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
        $("#addRes").stop().animate({ opacity: 0 }, 'fast', function() {
            /...
        });
    } else { //if visible
        $("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
            /...
        });
    }
}
于 2013-01-30T20:51:44.247 に答える
1

使用してみてくださいstop()：

ここにjsfiddleがあります。

if ($("#newResFormWrap").is(':visible')) {//this way is eaiser to check
    $("#addRes").stop(true,false).animate({ opacity: 0 }, 'fast', function() {
        $("#newResFormWrap").toggle('fast', function (){
            $("#newResForm").animate({ opacity: 100 },2000);
        });
    });
}
于 2013-01-30T20:54:15.753 に答える
1

いくつかのこと。まず、このJSFiddleをチェックして、動作を確認してください。

問題は、フェードイン アニメーションに 2 秒かかることです。したがって、2 秒以内に閉じると、遅延が発生します。

遅延がないようにタイミングを再調整しました。それらが好きかどうかを確認し、好きなように自由に変更してください。

if ($("#newResFormWrap").css('display') == "none") {//if hidden 
    $("#addRes").animate({ opacity: 0 }, 'fast', function() {
        $("#newResFormWrap").toggle(0, function (){
            $("#newResForm").animate({ opacity: 100 },400);
        });
    });
} else { //if visible
    console.log('click');
    $("#newResForm").animate({ opacity: 0 }, 0, function() {
        console.log('animated');
        $("#newResFormWrap").toggle(0)
    });
    $("#addRes").animate({ opacity: 100 }, 'fast');
}
于 2013-01-30T21:04:17.187 に答える