jQuery 圖片或文字依序顯示程式完成結果預覽
如果上方iframe有錯誤，請直接點擊：
點擊預覽
---------------------------------------------------------
[特效] 圖片依序顯示。
[重點] 使用 arguments.callee 呼叫匿名函式。
■
步驟解說
[步驟一] 鍵入以下程式
CSS
/* 設定圖片隱藏 */
.productdemo img {
display:none;
}
HTML
<div class="productdemo">
<img src="/photo/slider01.png">
<img src="/photo/slider02.png">
<img src="/photo/slider03.png">
<img src="/photo/slider04.png">
<img src="/photo/slider05.png">
</div>
<button id="play" type="button">play</button>
javascript - jQuery
/* 圖片依序顯示函數 */
function prodFadeIn() {
$('.productdemo img').first().fadeIn(1000, function() {
$(this).next().fadeIn(500, arguments.callee);
});
}
$(window).load(function() {
// 設定按鈕的 click 事件監聽
$('#play').click(function() {
$('.productdemo img').hide();
prodFadeIn();
});
});
結果：
前往 jsfiddle.net 見效果
觀看效果請點『 play按鈕』
---------------------------------------------------------------------
[步驟二] 但是當你一直點 『play按鈕』，你會發現圖片沒有依序顯示，而是前後亂跳，這時主要有 2 個解決方法
■
解決方法
[解1]. 在 fadeOut 前加 stop()，但參數的
clear queues、jump to end 必須為 true，也就是 stop(true, true)，否則當一直點選 button 時，在快速切換下前幾張圖容易出現淡化或隱藏情況。
javascript - jQuery
function prodFadeIn() {
$('.productdemo img').first().fadeIn(1000, function() {
$(this).next().fadeIn(500, arguments.callee);
});
}
$(window).load(function() {
$('#replay').click(function() {
$('.productdemo img').stop(true, true).hide(); // animate 特效前先呼叫 stop(clear-queues, jump-to-end)
prodFadeIn();
});
});
前往 jsfiddle.net 見效果
[解2]. 或是圖片未顯示完畢前先disable button，避免使用端一直按按鈕。
[最終解].解決方案 1、2 一起使用
javascript - jQuery
function prodFadeIn(){
// loopCount: 第幾張圖片開始顯示, loopEnd: 圖片全部數目
var loopCount = 1, loopEnd = $('.productdemo img').length;
$('.productdemo img').first()
.fadeIn(1000, function(){
// 圖片全部顯示完後，play 按鈕才取消 disable 屬性
if (loopCount >= loopEnd){
$('#replay').removeAttr('disabled');
}
$(this).next()
.fadeIn(1000, arguments.callee);
++loopCount; // 計算顯示到第幾張圖片
});
}
$(window).load(function(){
$('#replay').click(function(){
$('.productdemo img').stop(true, true).hide();
$('#replay').attr('disabled', 'true');
prodFadeIn();
});
});
範例
前往 jsfiddle.net 見效果
-----------------------------------------------------------------------
簡單應用 1
圖片由右至左移動
[解說]
[步驟1]. 假設有 4 張圖片，CSS & HTML 設定如下：
CSS
.productanimate {
position: relative; /* 非必要 */
width : 150px;
height: 60px;
border:1px solid black; /* 非必要 */
overflow: hidden;
}
.productanimate img {
display : none;
position: absolute;
}
HTML
<div class=productanimate>
<img id=ma1 src="/photo/a01.png">
<img id=ma2 src="/photo/a02.png">
<img id=ma3 src="/photo/a03.png">
<img id=ma4 src="/photo/a04.png">
</div>
[步驟2]. 用 jQuery 針對每張圖片設定它的 x 軸位置
$('.productanimate img').show().each(function(i){
$(this).css({
// 設定每張圖片 X 軸起始位置 ---自行調整，例如間隔 20px
left: i* 20 ,
opacity : 0.2
});
});
[步驟3]. 移動第一張圖片
$('.productanimate img').first()
.animate({opacity : 1}, 500)
.delay(1000)
.animate( { left: 移出距離 }, 1200 , function(){
code here.......... // 見步驟 4
});
[步驟4]. 移動第一張圖片後要接著做的動作: 依序移出下一張圖片
$(this).next()
.animate({opacity : 1}, 500)
.animate({ left: 每張圖片移動距離 }, 移出所須時間, 動作完畢所要執行的函式);
完整程式碼
CSS
.productanimate {
position: relative;
width : 150px;
height: 60px;
border:1px solid black;
overflow: hidden;
}
.productanimate img {
display : none;
position: absolute;
}
HTML
<div class="productanimate">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
</div>
<button id="play" type="button">play</button>
<div id="info"></div>
javascript
function func() {
// Step 1: 宣告變數
// x: 每張圖片移出距離
// duration: 每張圖片移出要耗費的秒數，愈後面的圖片因為移動距離比較大，要指定比較長的移出時間。視情況須自行調整。
// loopcount: 判斷所有圖片是否已經全部移出
// distance: 設定圖片定位點用。視情況自行調整。
var x = $('.productanimate img').first().outerWidth(true),
duration,
loopcount = 0,
loopMax = $('.productanimate img').length - 1,
distance = x / 2,
debuginfo = ''
;
// Step 2: 設定圖片初始值：位置與透明度等
$('.productanimate img').show().each(function(i) {
$(this).css({
// 每張圖片間格為圖片寬度的一半
left: i * distance,
opacity: 0.5
});
});
// Step 3: 開始圖片移動
$('.productanimate img')
.first() // 先移動第一張圖片
.animate({ opacity: 1 }, 500).delay(1000).animate({ left: '-' + x + 'px' }, 200, function() {
// 匿名函式 --//START\\---------------------------------------
// 移動第一張圖片後要接著做的動作
x += distance;
loopcount = (loopcount > loopMax) ? 0 : loopcount; // 如果全部圖片都移出，則重新計數
duration = 500 + loopcount * 200; // 每張圖片移出時間，若要看起來等速移出，愈後面的圖片花的時間會比較長
if (loopcount >= loopMax){ // 檢查圖片是否全部移出，判斷是否停止圖片依序移出效果，並恢復按鈕功能
$('#play').attr('disabled', false);
}
++loopcount;
// debug --//START\\---------------------
debuginfo += '圖片: ' + loopcount + ', 移動距離: ' + x + ', 移動時間: ' + duration + '\n'; //「\n」自行替換為 HTML 的 br 標籤(因 br 標籤在 syntaxhighlight 內無法正常顯示，故此處以 \n 代替
$('#info').html(debuginfo);
// debug --\\END//---------------------
$(this).next()
.animate({ opacity: 1 }, 500)
.animate({ left: '-' + x + 'px' }, duration, arguments.callee);
// 匿名函式 --\\END//--------------------------------------
});
};
$(window).load(function() {
$('#play').click(function(){
$(this).attr('disabled', true); // 按鈕 disable
func();
});
});
結果：
前往 jsfiddle.net 見效果
執行請點 【Run】
---------------------------------------
簡單應用 2
文章段落依序顯示
CSS
HTML
<div id="paracht">
<p>文章段落一</p>
<p>文章段落二</p>
<p>文章段落三</p>
<p>文章段落四</p>
<p>文章段落五</p>
<p>文章段落六</p>
<p>文章段落七</p>
<p>文章段落八</p>
</div>
<button id="parachtshow" type="button">show paragraphs in sequence...</button>
jQuery
var fadeinTime = 300;
$('#paracht p').hide();
$('#parachtshow').click(function(){
$('#paracht p').first().stop(true, true).fadeToggle(fadeinTime, function() {
$(this).next().stop(true, true).fadeToggle(fadeinTime, arguments.callee);
});
});
結果：
前往 jsfiddle.net 見效果
執行請點 【Run】
-----------------------------------------------------------------------
檔案下載
下載(單一HTML 檔案)
更新版本(程式碼更新，圖片檔+HTML檔案)
