Question

我对jQuery很新，我正在练习淡入淡出，从一个图像开始然后继续下一个图像，依此类推。我写了一段代码（下面），但想知道是否有更简单或更优雅的方式来编写它？我尝试了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>

Answer 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/

使用jQuery编写波纹效果的最佳方法

1 个答案: