Boa noite pessoal, estou com um pequeno desafio aqui e até agora não consegui a sulução, se alguem puder me ajudar seria muito grato:
Estou tentando colocar 2 gifs alocados no mesmo lugar da página, da seguinte forma:
loop{
1- página carrega
2- carregar gif1
3- delay 6000ms
4- remove gif1
5- carregar gif2
6- delay 6000ms
7- remove gif2
}
Dessa forma em loop eterno.
Consegui colocar os 2 banners para sumir e aparecer, o problema é que sumindo (fade out), o gif continua mudando os frames, então quando ele volta (fade in), ele está no meio de algum frame, e aí fica fora de sincronia...
Pesquisei aqui e parece que eu teria que remover o atributo src da tag img, mas não sei como colocar isso na minha função...
Segue meu código:
$( window ).load(function() {
var $elem = $('#bannertoppage .bannerp'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).fadeIn(100, function() {
$elem.eq(i % l).fadeOut(100, function(){
go();
});
i++;
}).delay(6200)
}
go();
});
Desde já obrigado!
(resolvido) Para quem precisar, aqui o código final:
html:
<div class="gif-wrapper">
<div id="0" class="gif-container">
<img class="gif-change" src="https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif">
</div>
<div id="1" class="gif-container">
<img class="gif-change" src=''>
</div>
</div>
Jquery:
var gifs = [{src:'http://seusite.com.br/seugif1.gif', delay: 6000}, {src: 'http://seusite.com.br/seugif2.gif', delay: 6000}];
var totalGifs = gifs.length;
var gifShow = 0;
$('.gif-wrapper .gif-container:gt(0)').hide();
setTimeout(change_gif, gifs[gifShow].delay, gifShow);
function change_gif(gifShow) {
$('.gif-wrapper .gif-container').hide();
gifShow++;
if(gifShow == totalGifs) gifShow = 0;
$('.gif-wrapper #' +gifShow+ ' img.gif-change').prop('src', gifs[gifShow].src+ '?'+ new Date().getTime());
setTimeout(change_gif, gifs[gifShow].delay, gifShow);
$('.gif-wrapper #' +gifShow).show();
}
E o jsfiddle do @Miguel https://jsfiddle.net/7e6kkL2a/5/
ABÇ!