2012-11-14 34 views
0

對不起,這個菜鳥的問題,我想提出三個紅色的語音泡沫一一呈現,請看到我的代碼在這裏:http://jsfiddle.net/FLt9Z/jQuery的setTimeout和顯示

了JavaScript的部分看起來像這樣:

function leftappear() { 
    $('#redbubble-left').show(); 
} 

function topappear() { 
    $('#redbubble-top').show(); 
} 

function rightappear() { 
    $('#redbubble-right').show(); 
} 


var animation_script = [ 
    { 
     at_time: 30 * 1000, // 30 seconds 
     animation: leftappear() 
    }, 
    { 
     at_time: 31 * 1000, // 31 seconds 
     animation: topappear() 
    }, 
    { 
     at_time: 32 * 1000, // 32 seconds 
     animation: rightappear() 
    } 
]; 

var current_time = 0; 

function animate_next() { 
    var next = animation_script.shift(), 
     time_between = next.at_time - current_time; 
    setTimeout(function() { 
     current_time = next.at_time; 
     next.animation(); 
     animate_next(); 
    }, time_between); 
} 

非常感謝你們!

+0

不錯的圖形,但是你的信息缺少一個問題。不要讓我們猜測這個問題,否則它可能會被關閉。 – ZippyV

回答

4

兩個問題:

  1. 你被調用你的animation_script
  2. 你從來沒有觸發下一個第一動畫中引用它們的動畫方法,而不是。

http://jsfiddle.net/FLt9Z/1/

這裏有兩個重大變化。

var animation_script = [ 
    { 
     at_time: 2* 1000, // 30 seconds 
     animation: leftappear // NOTE: drop the parens() 
    }, 
    { 
     at_time: 3* 1000, // 31 seconds 
     animation: topappear // NOTE: drop the parens() 
    }, 
    { 
     at_time: 4* 1000, // 32 seconds 
     animation: rightappear // NOTE: drop the parens() 
    } 
]; 

,然後2,踢它關閉,我簡單地添加到animate_next();底部。你可以把它放在你的init腳本的頂部或其他地方。這只是爲了演示目的。

+0

感謝您指出我的錯誤!真的有幫助 – Agatha

2

除了第一個答案,我也想指出你當前的代碼不斷自稱即使其通過氣泡顯示列表中消失了,而不是我只想通過它循環一旦設置超時:

$.each(animation_script, function(i, animation) { 
    var next = animation_script.shift(), 
     time_between = next.at_time - current_time; 
    setTimeout(function() { 
     current_time = next.at_time; 
     next.animation(); 
    }, time_between); 
}); 
+0

好的貢獻。 –

+0

我想我得到的邏輯。謝謝 :) – Agatha