Добавить эффект затухания изменения фона с помощью jquery

Question

Добавить эффект затухания изменения фона с помощью jquery

0

У меня есть следующий код:

$(document).ready(function() {

    var bgCounter = 0,
        backgrounds = [
           "images/2.png",
           "images/1.png",
           "images/3.png"
        ];

    function changeBackground()
    {
        bgCounter = (bgCounter+1) % backgrounds.length;
        $('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');
        setTimeout(changeBackground,100000);
    }

    changeBackground();
    });

Мне нужно добавить эффект fade in/out, между изменениями фона. Любые указания?

uniqezor 30 март 2014, в 16:10

Источник

Теги:

javascript

jquery

css

background

fade

2 ответа

2

Попробуй это:

 $(document).ready(function() {
 var bgCounter = 0,
    backgrounds = [
       "images/2.png",
       "images/1.png",
       "images/3.png"
    ];

 function changeBackground()
 {
    bgCounter = (bgCounter+1) % backgrounds.length;
      $('#page').animate({
     opacity: 0
    }, 0).css({
          'background-image': 'url('+backgrounds[bgCounter]+')'
     }).animate({opacity: 1}, 1000);

 setTimeout(changeBackground,10000);
 }

 changeBackground();
 });

Демо: http://jsfiddle.net/nq7uE/8/

Reflected pixel 30 март 2014, в 12:35

0

Спасибо m8, это работает, но пример Karim AG работает лучше для меня
uniqezor 30 март 2014, в 14:39

Ещё вопросы

Спасибо m8, это работает, но пример Karim AG работает лучше для меня

Karim AG · Accepted Answer · 2014-03-30T12-59-00.000Z

Просто добавьте это:

$('#page').fadeIn()

до

$('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');

И это:

$('#page').fadeOut()

после этого..