web-dev-qa-db-ja.com

この奇妙なjQuery.animate（）ラグを防ぐ方法は？

デモを参照してください： 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 });
            });
        });
    }
}
jqueryjquery-animatelag
14
Roy

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

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

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

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

27
Plynx

アニメーション呼び出しの前に.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() {
            /...
        });
    }
}
1
Michael Robinson

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);
        });
    });
}
1
Barlas Apaydin

いくつかのこと。まず、これをチェックしてください 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');
}
1
Split Your Infinity