Czasowa zmiana tła diva z animacją

Question

Witam, W jaki sposób sprawić, aby tło diva zmieniało się po upływie danego czasu wraz z animacją przejścia?

Comments

po upływie danego czasu

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Co do animacji, to podaj jakieś szczegóły. 

---

Chodzi o prostą animację (np. jedna z tych: http://css3.bradshawenterprises.com/cfimg/ ). Jak ją zintegrować ze zmianą zdjęć?

---

Hmm, nie mam pod ręką obrazków o identycznych wymiarach, więc napiszę trochę w ciemno na podstawie HTMLa i CSSa z pierwszego przykładu ze stronki, którą podałeś:

CSS:

#cf img.top.over {
  opacity:0;
}

+ JavaScript:

setTimeout(function()
{
     document.querySelector('.top').classList.add('over');
}, 3000); // wykonaj po 3 sekundach

Daj znać, czy działa, albo co nie działa.

Answer 1

requestAnimationFrame albo transition, tudzież CSS Animations.

Answer 2

<script type="text/javascript">
  $(window).load(function() {           
  var i =0; 
  var images = ['images/Krotoszyn087.jpg','images/Krotoszyn088.jpg','images/Krotoszyn100.jpg'];
  var image = $('.bgns-1');
                //Initial Background image setup
  image.css('background-image', 'url(images/Krotoszyn095.jpg)');
                //Change image at regular intervals
  setInterval(function(){   
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(10);
   });
   if(i == images.length)
    i = 0;
  }, 5000);            
 });
</script>

Jak zmienić w tym skrypcie animacje zmiany?