本帖最後由 jocosn 於 2012-9-22 21:44 編輯
圖片依序顯示。
注意重點:使用 arguments.callee 呼叫匿名函式。
----------------------------------------------------------------------------------
HTML & CSS
CSS
.productdemo img {
display:none;
}
HTML
<div class="productdemo">
<img src="http://jsgears.com/_icons/11.png">
<img src="http://jsgears.com/_icons/12.png">
<img src="http://jsgears.com/_icons/14.png">
<img src="http://jsgears.com/_icons/15.png">
</div>
jQuery$(window).load(function(){
$('.productdemo img').first().fadeIn(1000, function(){
$(this).next().fadeIn(1000, arguments.callee);
});
});
----------------------------------------------------------------------------------
結果:
http://jsfiddle.net/nvanQ/1/
執行請點 【Run】
///////////////////////////////////////////////////////////////////
簡單應用
圖片由右至左移出CSS
.productanimate {
position: relative;
width : 150px;
height: 60px;
border:1px solid black;
overflow: hidden;
}
HTML
<div class="productanimate">
<img src="http://jsgears.com/_icons/11.png">
<img src="http://jsgears.com/_icons/12.png">
<img src="http://jsgears.com/_icons/14.png">
<img src="http://jsgears.com/_icons/15.png">
</div>
jQuery
function func() {
// x 為圖片寬度(包括 padding, border, margin)
x = $('.productanimate img').first().outerWidth(true), distance = x/2;
$('.productanimate img').show().each(function(i){
$(this).css({
// 每張圖片間格為圖片寬度的一半
left: i*distance ,
opacity : 0.2
})
});
$('.productanimate img').first()
.animate({opacity : 1}, 500)
.delay(1000)
.animate( { left: '-' + x + 'px'}, 1200 , function(){
x += distance;
duration = 1200 + loopcount * 200;
++loopcount ;
$(this).next()
.animate({opacity : 1}, 500)
.animate({ left: '-' + x + 'px' }, duration, arguments.callee);
});
setTimeout(func, 8000); // 所有動畫執行完畢後再次呼叫 function 再執行一次
};
var x, distance, duration, loopcount = 0;
$(window).load(function(){
func();
});
http://jsfiddle.net/nvanQ/5/
見這 jquery 圖片淡入與移出 |