Эффект затухания в фоновом режиме

Question

Как я могу сделать свой встроенный стиль div, чтобы изменить его изображение изображения изображения через 5 секунд?

Пример:

<div class="foobar" style=" background:(url'red.png')"> </div> 

Через 5 секунд, она должна быть:

<div class="foobar" style=" background:(url'blue.png')"> </div> 

и Через 5 секунд, он должен быть:

<div class="foobar" style=" background:(url'yellow.png')"> </div> 

Таким образом, можно цикл 3 изображения в этом фобаре, красном, синем и желтом фоне.

Вот что я пытался до сих пор: Working fiddle

Answer 1

Вы должны использовать setInterval() вместо:

setInterval(nextBackground, 5000); 

Если вы хотите гладкую Fade в обиходе fadeIn() функции:

imagrep.hide().fadeIn(); 

ПРИМЕЧАНИЕ.fadeIn() работает только с скрытыми элементами, поэтому мы должны сначала скрыть элемент.

Надеюсь, это поможет.

$(function() { 
 
    var imagrep = $('.foobar'); 
 
    var backgrounds = ['url(http://images.huffingtonpost.com/2016-03-02-1456944747-2376497-naturehike.jpg)', 'url(http://www.mindful.org/wp-content/uploads/2016/03/nature.jpg','url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg)']; 
 
    var current = 0; 
 

 
    function nextBackground() { 
 
    imagrep.css('background',backgrounds[current]); 
 
    imagrep.hide().fadeIn(); 
 
    
 
    if(current==backgrounds.length-1) 
 
     current=0; 
 
    else 
 
     current++; 
 
    } 
 
    
 
    setInterval(nextBackground,2000); 
 
});

.foobar { 
 
    height: 400px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="foobar" style="background:url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg);"> 
 
</div>

Answer 2

Вы не можете анимировать фоновое изображение (или фон с изображением) собственности, но вы можете получить такой же эффект, как это:

imagrep.animate({opacity: 0}, 'slow', function() { 
    imagrep.css({'background-image': backgrounds[current = ++current % backgrounds.length]}).animate({opacity: 1}); 
}); 

Это одушевленный непрозрачность 0, затем изменить изображение и, наконец, оживить непрозрачность до 1.

Вот jsfiddle: http://jsfiddle.net/m61u51xt/3/

Answer 3

Лучший способ - использовать плагин jquery Cycle. Вы можете скачать его с

http://jquery.malsup.com/cycle/

Это открытый исходный код и легко impliment и кроме того, вы можете добавить различный эффект, как FadeIn, масштабирование и т.д. Суффле