Jquery mehr divs mit unterschiedlichen Zeiten

Question

Verblassen ist eine Flash-Animation zu jquery # Umwandlung

i im Grunde eine Last von div-Tags hat, die unterschiedlichen Farben sind, ich mag den divs in und auszublenden, hat jedes div eine anderen Timing basierend auf einer Fibonachi-Sequenz,

Ich habe Probleme beim Zuweisen einer Fade-Funktion zum div, ich möchte die Fade-Funktion das div dann ausblendet, wenn abgeschlossen ist verblassen es wieder ein, und wiederholen Sie den Vorgang für jedes div .

hier ist mein aktueller code, aber es stürzt firefox vermutlich zu tun mit mir so viele setintervals kann mir jemand bitte in die richtige richtung zeigen?

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); 
    } 

}) 

wenn ich setInterval('stripeFadeIn(' + id + ')', myfibtime+' verwende; Ich bekomme StripeFadeIn ist undefiniert, wenn ich versuche, .animate wie von Mathew suguested ich bekomme zu viel Rekursion

Answer 1

Beim Erstellen von Intervall-Objekten in der Schleife und in der setFadeIn-Funktion werden Intervallobjekte exponentiell erstellt. Letztendlich landet der Browser abstürzt.

Stattdessen können Sie eine Sache in der Schleife selbst tun, zwei Intervalle erstellen, d. H. Einen für fadeOut und einen für fadeIn. Verwenden Sie einige Millisekunden Ihrer Wahl.

Dann sollte Ihr fadeOut auf jeder myfibtime + animatingMilliseconds = fadeOutInterval aufgerufen werden. Und Ihr fadeIn sollte bei jedem fadeOutInterval + animatingMilliseconds aufgerufen werden.

Ich hoffe, das Sie

Mein Vorschlag an Ihren alten Code bezieht sich vollständig helfen. So gehen sie wie folgt

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

Ich würde empfehlen, in jQuery Animationen suchen und einen Rückruf einrichten, um das Gegenteil Fade zu tun.

In ihrem Beispiel wird die Opazität für die Animation verwendet, damit Sie vielleicht den gewünschten Effekt erzielen.