jquery décoloration plusieurs divs avec des timings différents

Question

am convertir une animation flash pour jquery #

i ont essentiellement une charge de divs qui sont différentes couleurs, je veux les divs à disparaître et sortir, chaque div a un timing différent basé sur une séquence de fibonachi,

Je rencontre des problèmes assignant une fonction de fondu à la div, je veux la fonction de fondu fondu la div alors quand est fade-il à nouveau, et ne cessent de répéter le processus pour chaque div.

voici mon code actuel, mais il se bloque sans doute Firefox faire avec moi d'avoir tant de point de moi quelqu'un de setintervals peut dans la bonne direction s'il vous plaît?

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

})

si j'utilise setInterval('stripeFadeIn(' + id + ')', myfibtime+'; je reçois stripeFadeIn est indéfini, si j'essaie d'utiliser .animate comme suguested par mathew je reçois trop récursivité

Answer 1

Comme vous créez objet d'intervalle dans votre boucle, ainsi que dans votre fonction setFadeIn que les causes la création d'objets d'intervalle de façon exponentielle. se termine en fin de compte par le navigateur s'écraser.

Au lieu de cela, vous pouvez faire une chose dans la boucle elle-même, créer deux intervalles i.e. un pour fadeOut et un pour fadeIn. Insted du « lent », utilisez quelques millisecondes de votre choix.

Ensuite, votre fadeOut doit être appelé à chaque myfibtime + animatingMilliseconds = fadeOutInterval. Et votre fadeIn devrait être appelé à chaque fadeOutInterval + animatingMilliseconds.

J'espère que cela vous aidera

Ma suggestion se réfère complètement à l'ancien code. Donc, faire comme ceci

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

Je recommande à la recherche dans les animations jQuery http://api.jquery.com/animate/ et la configuration d'un rappel pour faire le fondu opposé.

Leur opacité par exemple les utilisations de l'animation, alors peut-être que vous donnera l'effet désiré.