jqueryを使用して、時間の経過とともに順番にフェードインしようとしています

Question

ページが読み込まれたときに、4つの画像を順番にフェードする方法を見つけようとしています。

以下は私の（アマチュア）コードです。

これがHTMLです：

<div id="outercorners">

 <img id="corner1" src="images/corner1.gif" width="6" height="6" alt=""/>
 <img id="corner2" src="images/corner2.gif" width="6" height="6" alt=""/>
 <img id="corner3" src="images/corner3.gif" width="6" height="6" alt=""/>
 <img id="corner4" src="images/corner4.gif" width="6" height="6" alt=""/> 

</div><!-- end #outercorners-->

これがjQueryです：

$(document).ready(function() {

$("#corner1").fadeIn("2000", function(){

$("#corner3").fadeIn("4000", function(){

  $("#corner2").fadeIn("6000", function(){

    $("#corner4").fadeIn("8000", function(){


    });

   });

 });

 });

これがCSSです：

#outercorners {
position: fixed;
top:186px;
left:186px;
width:558px;
height:372px;
}

#corner1 {
position: fixed;
top:186px;
left:186px;
display: none;
}

#corner2 {
position: fixed;
top:186px;
left:744px;
display: none;
}

#corner3 {
position: fixed;
top:558px;
left:744px;
display: none;
}

#corner4 {
position: fixed;
top:558px;
left:186px;
display: none;
}

彼らは私が彼らに帰した順序でフェードインするのではなく、ただ私にウインクしているようです。 Queue（）関数を使用する必要がありますか？そして、もしそうなら、この場合にどのように実装しますか？

助けてくれてありがとう。

Answer 1

引用をあなたの期間から遠ざけるか、プリセットのいずれかを「遅い」または「高速」などを使用します

$("#corner1").fadeIn(2000, function(){...

また

$("#corner1").fadeIn("slow", function(){...

いいえ

$("#corner1").fadeIn("2000", function(){...

Answer 2

私はこれが数ヶ月の質問であることを知っていますが、私は誰かを助けるかもしれない解決策を投稿することを考えました。私はこのようなことをします：

var d= 0;
$('#outercorners > img').each(function() {
    $(this).delay(d).fadeIn(1000);
    d += 1000;
});

あなたのニーズに合わせて、1000msを任意の数字に変更できます。それらは平等である必要はないことに注意してください。

デモ：

http://jsfiddle.net/e5h5y/

http://jsfiddle.net/e5h5y/2/

幸運を

Answer 3

あなたが多くの画像を持っているなら、あなたはそれらを時限関数でフェードインしたいと思うかもしれません：

var x=0; // The corner counter

function fading() {
  $("#corner"+(++x)).fadeIn(2000); // Fade in the current corner

  if (x==4) { // Last image to be faded in?
    clearInterval(); // Stop interval
  }
}

$(document).ready(function(){
  setInterval("fading()",1000); // Call function every second
});

Answer 4

あなたはあなたの画像をaで包む必要があるかもしれません <div> そしてそれらをフェードします。好き：

<div id="corner1"><img src="images/corner1.gif" width="6" height="6" alt=""/></div>

数字の周りの引用は違いを生むべきではありません。 JSは、数値が予想されるコンテキストで「2000」を2000に暗黙的に変更します（文字列を使用する場合を除く）。