jquery的衰落多個div與不同的定時

Question

正在轉換flash動畫到的jquery＃

我基本上的div它們是不同的顏色的一個負載，我想的div到淡入和淡出，每個div有一個不同基於fibonachi序列的時間，

我有問題分配一個淡入淡出功能的div，我希望淡出功能淡出div然後完成淡入淡出，並繼續重複每個div的過程。

這裏是我目前的代碼，但它崩潰的Firefox大概與我有這麼多setintervals任何人都可以指出我在正確的方向嗎？

var myDiv ='#bannerHolder' 
    var fib_str = '1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13' 
    var widths_str = '33px, 31px, 35px, 9px, 16px, 50px, 33px, 24px, 40px, 20px, 63px, 30px, 10px, 29px, 11px, 12px, 51px, 31px, 35px, 11px, 14px, 50px, 30px, 25px, 38px, 20px, 35px' 
    var pos_str = '0px, 44px, 105px, 144px, 153px, 203px, 236px, 269px, 280px, 354px, 374px, 437px, 447px, 457px, 506px, 517px, 529px, 604px, 646px, 687px, 698px, 712px, 762px, 787px, 823px, 895px, 915px' 
    var color_str = '#D5E1D7, #18D4C9,#BF51C3,#1E82C9, #EDEDED, #E1C981, #C9A94F, #BDBCAA, #5DB522, #EB2F34, #823133, #004BD8, #A6A0A0, #DS9F36, #FFDB00, #69944F, #18D4C9, #BF51C3, #1E82C9, #6B949A, #FFDB00, #819E64, #BDBCAA, #54BA43, #EB2F34, #823133' 
    var width = widths_str.split(","); 
    var pos = pos_str.split(","); 
    var color = color_str.split(","); 
    var fib = fib_str.split(","); 
    console.log(width); 
    console.log(pos); 
    console.log(color); 
    var counter = width.length 
    var stopper = false; 
      for(i=0;i<counter;i++){ 
     var html = '<div id ="stripe'+i+'"/>' 
     $(myDiv).append(html) 
     $('#stripe'+i).css({ 'top': 0, 'left': pos[i],'position': 'absolute', 'float': 'left', 'background-color' : color[i]}) 
     $('#stripe'+i).attr({'height': 100, 'width': width[i], 'min-width' : width[i], 'min-height' : '100px' }) 
     $('#stripe'+i).width(width[i]) 
     $('#stripe'+i).height('100px') 
     var myfibtime = (fib[i] * 200); 
     setInterval(stripeFadeOut(i), myfibtime); 
       setInterval(stripeFadeIn(i), myfibtime); 
    }; 
    function stripeFadeOut(id){ 
     $('#stripe'+id).fadeOut('slow'); 
     var myfibtime = (fib[id] * 200); 
    } 
    function stripeFadeIn(id){ 
     $('#stripe'+id).fadeIn('slow'); 
     var myfibtime = (fib[id] * 200); 
    } 

}) 

如果我使用setInterval('stripeFadeIn(' + id + ')', myfibtime+';我得到stripeFadeIn是不確定的，如果我嘗試使用。馬馬如果我提供了太多的遞歸

Answer 1

正如您在循環中創建區間對象以及在setFadeIn函數中那樣，這會導致按指數規律創建區間對象。最終通過瀏覽器崩潰結束。

相反，您可以在循環中做一件事，創建兩個間隔，即一個用於淡出和一個用於淡入淡出。在「緩慢」的狀態下，使用一些毫秒的選擇。

然後，應該在每個myfibtime + animatingMilliseconds = fadeOutInterval上調用您的fadeOut。並且應該在每個fadeOutInterval + animatingMilliseconds上調用您的fadeIn。

我希望這會幫助你

我的建議完全是指你的舊代碼。所以，做這樣的

for(i=0;i<counter;i++){ 
     var html = '<div id ="stripe'+i+'"/>' 
     $(myDiv).append(html) 
     $('#stripe'+i).css({ 'top': 0, 'left': pos[i],'position': 'absolute', 'float': 'left', 'background-color' : color[i]}) 
     $('#stripe'+i).attr({'height': 100, 'width': width[i], 'min-width' : width[i], 'min-height' : '100px' }) 
     $('#stripe'+i).width(width[i]) 
     $('#stripe'+i).height('100px') 
     var myfibtime = (fib[i] * 200); 
     var animTime = 1500; 
     var fadeOutInterval = myfibtime + animTime; 
     var fadeInInterval = fadeOutInterval + animTime; 
     setInterval(stripeFadeOut(i), fadeOutInterval); 
     setInterval(stripeFadeIn(i), fadeInInterval); 
    }; 
    function stripeFadeOut(id){ 
     $('#stripe'+id).fadeOut(1500);    
    } 
    function stripeFadeIn(id){ 
     $('#stripe'+id).fadeIn(1500); 
    } 

Answer 2

我建議查看jQuery動畫並設置一個回調來做相反的淡出。

他們的例子使用不透明度的動畫，所以也許會給你想要的效果。