JQuery desbotando várias divs com horários diferentes
-
26-09-2019 - |
Pergunta
Estou convertendo uma animação flash em jQuery#
Eu basicamente tenho uma carga de divs com cores diferentes, eu quero que os divs desapareçam e saindo, cada div tem um tempo diferente baseado em uma sequência de fibonachi,
Estou tendo problemas para atribuir uma função de desbotamento à div, quero que a função Fade desbote a div e quando é concluída desbotá -la novamente e continue repetindo o processo para cada div.
Aqui está o meu código atual, mas trava o Firefox presumivelmente a ver comigo ter tantos setintervals
Alguém poderia indicar-me a direção correta, por favor?
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);
}
})
se eu usar setInterval('stripeFadeIn(' + id + ')', myfibtime+'
; Eu recebo Stripefadein é indefinido, se eu tentar usar.
Solução
Ao criar um objeto de intervalo em seu loop, bem como na função Setfadein, que faz com que a criação de objetos de intervalo exponencialmente. Em última análise, acaba batendo no navegador.
Em vez disso, você pode fazer uma coisa no loop, criar dois intervalos, ou seja, um para o Fadeout e um para Fadein. Instalado de 'lento', use alguns milissegundos de sua escolha.
Em seguida, seu Fadeout deve ser chamado em todos os MyFibtime + AnimatingMillisEconds = FadeOutInterval. E seu Fadein deve ser chamado em todos os fadeotinterval + animatingMillisEconds.
Eu espero que isso te ajude
Minha sugestão se refere completamente ao seu código antigo. Então faça assim
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);
}
Outras dicas
Eu recomendo procurar animações jQuery http://api.jquery.com/animate/ e configure um retorno de chamada para fazer o desbotamento oposto.
O exemplo deles usa a opacidade para a animação, então talvez isso lhe dê o efeito desejado.