3

O seguinte código faz um "fader de imagens" em uma div que tenho no meu documento. Porém, o efeito é muito 'seco', gostaria de ter uma transição durante a troca das imagens, tipo o efeito "fade" do jQuery.

var images = ['image-1.jpg','image-2.jpg','image-3.jpg','image-4.jpg','image-5.jpg','image-6.jpg'],
   index = 0,
   maxImages = images.length - 1;
var timer = setInterval(function() {
   var curImage = images[index];
   index = (index == maxImages) ? 0 : ++index;
   $('.header').css({'background-image':'url(./img/'+curImage+')'});
}, 1500);

Como eu poderia fazer?

Segue um fiddle com um pequeno exemplo.

1
  • Que tipo de transição você espera conseguir? Uma imagem apagando e depois a outra aparecendo, uma imagem se "transformando" na outra... Creio que é possível fazer isso, mas não com background-image - segundo essa resposta no SOen, não há propriedades customizáveis no background-image, então você vai ter que "simular" um background usando um outro elemento (e nesse sim, aplicar efeitos de transição).
    – mgibsonbr
    Commented 26/03/2014 às 2:48

3 Respostas 3

5

Use propriedade CSS transition: background 500ms ease diretamente na classe .header ou com o javascript:

$('.header').css({
    'background-image': 'url('+curImage+')',
    'transition': 'background 500ms ease'
});
1
  • Custei pra ver o efeito, achei até que não tinha funcionado, mas deu certo: jsfiddle.net/WHhua/1
    – mgibsonbr
    Commented 26/03/2014 às 2:52
3

Adicione transition: background-image 300ms; no seu ficheiro CSS. É melhor adicionar no ficheiro CSS do que adicionar regras de CSS via javascript.

Exemplo

CSS

.header{
    background: #333 url('http://flaticons.net/icons/Emotions/Cheeky.png') no-repeat;
    width: 100%;
    height: 262px;
    transition: background-image 300ms; // linha nova!
                                        // 300ms é a velocidade (em milisegundos) da transição
}

Para browsers mais antigos que não suportam CSS transitions pode usar assim:

Exemplo

HTML

<div class="header">
    <div class="headerImage"></div>
</div>

CSS

.header {
    width: 100%;
    height: 262px;
    background: #333
}
.headerImage {
    background: url('http://flaticons.net/icons/Emotions/Cheeky.png') no-repeat;
    width: 100%;
    height: 100%;
}

Javascript

var timer = setInterval(function () {
    var curImage = images[index];
    index = (index == maxImages) ? 0 : ++index;
    var $headerImage = $('.headerImage');
    $headerImage.animate({
        opacity: 0
    }, function () {
        $headerImage.css({
            'background-image': 'url(' + curImage + ')'
        });
        $headerImage.animate({
            opacity: 1
        })
    });
}, 1500);
2

Na linha:

$('.header').css({'background-image':'url(./img/'+curImage+')'});

Você pode colocar um efeito de fadeout e fade in:

$('.header').fadeout().css({'background-image':'url(./img/'+curImage+')'}).fadein();
2
  • Não funciona amigo.. Faça o teste no Fiddle que adicionei..
    – Wagner'
    Commented 26/03/2014 às 1:38
  • Pra funcionar usando o fadeOut e o fadeIn seria algo parecido com isso: jsfiddle.net/WHhua/2
    – Moykn
    Commented 26/03/2014 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .