jquery fading multiple divs with different timings

Question

am converting a flash animation to jquery#

i basically have a load of divs which are different colours, i want to the divs to fade in and out, each div has a different timing based on a fibonachi sequence,

i am having problems assigning a fade function to the div, i want the fade function to fade out the div then when is completed fade it in again, and keep repeating the process for each div.

here is my current code but it crashes firefox presumably to do with me having so many setintervals can anyone point me in the right direction please?

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

})

if i use setInterval('stripeFadeIn(' + id + ')', myfibtime+'; i get stripeFadeIn is undefined, if i try to use .animate as suguested by mathew i get too much recursion

Answer 1

As you are creating interval object in your loop as well as in your setFadeIn function that causes creating interval objects exponentially. Ultimately ends up by crashing browser.

Instead you can do one thing in the loop itself, create two intervals i.e one for fadeOut and one for fadeIn. Insted of 'slow', use some milliseconds of your choice.

Then your fadeOut should be called on every myfibtime + animatingMilliseconds = fadeOutInterval. And your fadeIn should be called on every fadeOutInterval + animatingMilliseconds.

I hope this will help you

My suggestion completely refers to your old code. So do like this

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

I'd recommend looking into jQuery animations http://api.jquery.com/animate/ and setup a callback to do the opposite fade.

Their example uses opacity for the animation, so perhaps that will give you the desired effect.