3

ページの読み込み時に 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() 関数を使用する必要がありますか? もしそうなら、この場合どのように実装しますか？

ご協力ありがとうございます。

4

4 に答える 4

8

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

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

必要に応じて、1000ms を任意の数値に変更できます。それらが等しい必要はないことに注意してください。

デモ：

http://jsfiddle.net/e5H5Y/

http://jsfiddle.net/e5H5Y/2/

幸運を

于 2011-01-23T04:48:29.943 に答える
2

デュレーションから引用を取り除くか、「遅い」または「速い」などのプリセットのいずれかを使用します

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

また

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

いいえ

$("#corner1").fadeIn("2000", function(){...
于 2010-06-15T20:55:20.793 に答える
1

多くの画像がある場合は、時間指定機能を使用してそれらをフェードインすることをお勧めします。

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
});
于 2010-06-15T21:45:23.027 に答える
0

<div>画像を でラップしてフェードする必要がある場合があります。お気に入り：

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

数字を引用符で囲んでも違いはありません。JS は、数値が予期されるコンテキストで "2000" を 2000 に暗黙的に変更します (文字列を連結する + を使用する場合を除く)。

于 2010-06-15T21:06:21.997 に答える