4

次の JavaScript スニペットがあります。

$("#dashboard").addClass("standby").delay(3000).removeClass("standby");
$(".active").removeClass("active");
$("." + target).addClass("active");
$(".showDiv").removeClass("showDiv").addClass("hide");
$("#" + target).removeClass("hide").addClass("showDiv");

#dashboardがスタンバイの間、この CSS クラスの変更をすべて処理する必要があります。#dashboardこれが変更された後、再び表示されるはずです。だから私は-classdelay()の追加と削除の間に設定しました。standbyそれが機能するかどうかを確認するために、長すぎる 3 秒の期間を追加しました。

でも遅れない！なぜそうしないのですか？見えない...

4

8 に答える 8

12

delayアニメーション パイプラインを通過するアクションでのみ機能し、そのようなインスタント アトミック操作のタイミングには影響しません。クラスの追加や削除などを遅らせるには、 を使用できますsetTimeout。

.delay() メソッドを使用すると、キュー内でそれに続く関数の実行を遅らせることができます。標準のエフェクト キューまたはカスタム キューで使用できます。

.delay() メソッドは、キューに入れられた jQuery エフェクト間の遅延に最適です。制限があるため (たとえば、遅延をキャンセルする方法は提供されません)、.delay() は JavaScript のネイティブな setTimeout 関数に代わるものではなく、特定のユース ケースにより適している場合があります。

于 2013-07-08T08:50:33.697 に答える
3

述べたように...遅延は期待どおりに機能しません...これがどのように機能するかです:

$(document).ready(function(){        
    var audio = new Audio('sang3.mp3');
    audio.play();

    $("#image1")
        .hide()
        .attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250")
        .fadeIn(1000)
        .delay(3000)
        .fadeOut(1000)
        .queue(function(next) { 
          $(this).attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-2&w=350&h=250")
          next(); 
        })
        .fadeIn(1000); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img src="" id="image1">

于 2015-09-15T20:29:03.053 に答える
3

次の行では、遅延が期待どおりに機能しません。

$("#image1").delay(9000).attr("src", "image/image1.jpg");
$("#image1").delay(9000).attr("src", "image/image2.jpg");

すぐに属性変更を実行します。なんで？属性変更は「アニメーション」の一部ではないためです。遅延は、アニメーション関数でのみ使用できます。

必要な画像が 2 つだけの場合は、2 つの画像を重ねて、必要に応じてフェードインおよびフェードアウトするのが最も簡単な場合があります。

これを多くの画像に拡張したい場合は、より堅牢な「.animate」機能を使用してフェードインおよびフェードアウトしてみてください。「Animate」には、完了時に呼び出されるコールバック関数を指定できます。

于 2015-09-15T20:26:02.617 に答える
2

あなたのすべての遅れが始まります$(document).ready();

$("#image1").delay(5000).fadeIn(3000);
$("#image1").delay(9000).attr("src", "image/image1.jpg"); 
$("#image1").delay(5000).fadeOut(3000);
$("#image1").delay(9000).attr("src", "image/image2.jpg");
$("#image1").delay(5000).fadeIn(3000);
$("#image1").delay(5000).fadeOut(3000);

このように考えてください。ドキュメントの準備が整うと、JS はその関数内にあるものの実行を開始します。最初に実行される遅延は次のとおりです。$("#image1").delay(5000).fadeIn(3000);

これにより、5000 ミリ秒の遅延が開始され、その後fadeOut()3000 ミリ秒の遅延が発生します。そのフェードアウトは遅延と同期していますが、コードの次の行はこれと完全に非同期です。

その後、次の行に進みます。等々。あなたの遅れが終わるのを待つことはなく、バックグラウンドでカウントを開始するだけです。

.delay()同じ要素に適用するとDOESスタック: JSFiddle

誰かが私のように混乱した場合に備えて、これを残します

于 2015-09-15T20:27:48.627 に答える
0

通常、スタンバイ状態を削除する前に何かを行う必要があるため、ajax コールバックでクラスを削除します。

$("#dashboard").addClass("standby");
$.get('urltoget',function(data){
  if(data)
    $("#dashboard").removeClass("standby");
  else
    $("#dashboard").removeClass("standby").addClass('error');
})
于 2013-07-08T09:00:52.740 に答える