0

私はjQueryを初めて使用し、1つの画像から始まり、次の画像に続くフェードインを練習しています。私はコードの一部を書きました (以下) が、それを書くためのより簡単でエレガントな方法があるかどうか疑問に思っていましたか? each() 関数を試しましたが、うまくいかなかったようです:

    <script type="text/javascript" src="jquery/jquery-1.8.2 .min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //alert($("div img").length);
    $("div img").css("display","none");
    var delayAmt=0;
    for(var x=0;x<$("div img").length;x++){
        $("div img:eq("+x+")").delay(delayAmt).fadeIn(1000);
        delayAmt+=250;
    }
});
</script>

</head>

<body>
<h1>Ripple fade in.</h1>
<div>
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>
4

1 に答える 1

1

HTML：

<body>
<h1>Ripple fade in.</h1>
<div id="images">
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>​​​

jQuery：

$(document).ready(function(){
   var delay=0;
   $('#images').children('img').each(function () {
      $(this).css("display","none");
      $(this).delay(delay).fadeIn(1800);
      delay += 1000;
   }); 
});

ここにjsFiddleリンク：http：//jsfiddle.net/salih0vicX/6GZt6/

于 2012-11-14T19:14:31.073 に答える