使用jQuery編程漣漪效果的最佳方法

我對jQuery非常陌生，我正在練習淡入淡出，然後開始一個圖像，然後繼續到下一個圖像等等。我寫了一段代碼（下面），但想知道是否有更簡單或更優雅的方式來編寫它？我試過每（）函數，但似乎並沒有工作：使用jQuery編程漣漪效果的最佳方法

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

來源

2012-11-14 Adam

有無數的JQuery插件，可以做幻燈片播放和播放東西。我會推薦flexslider。 http://www.woothemes.com/flexslider/ –

我想我誤解了你在做什麼。沒關係。 –

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-14 19:14:31 salih0vicX

使用jQuery編程漣漪效果的最佳方法

回答

相關問題