• 0

Div background slideshow using jquery


Question

I have the following code:

var bgArr = ["/Images/Backgrounds/Home/0.jpg", "/Images/Backgrounds/Home/1.jpg", "/Images/Backgrounds/Home/2.jpg", "/Images/Backgrounds/Home/3.jpg"];

var i = 0;

setInterval(function () {

$("#head").css("background-image", "url(" + bgArr + ")");

(i < bgArr.length - 1) ? i++ : i = 0

}, 1000);

How can I add the fadeIn / fadeOut or slide left animation to the background changeover?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

setInterval(function() {
   $("#head").fadeOut('slow', function() {
        $("#head").css("background-image", "url(" + bgArr[i] + ")");
        (i &lt; bgArr.length - 1) ? i++ : i = 0
        $("#head").fadeIn('slow');
    }
}

That should do it, not tested in anyway, but I believe that would work.

Link to comment
Share on other sites

  • 0

setInterval(function() {
 $("#head").fadeOut('slow', function() {
 $("#head").css("background-image", "url(" + bgArr[i] + ")");
 (i &lt; bgArr.length - 1) ? i++ : i = 0
 $("#head").fadeIn('slow');
 }
}

That should do it, not tested in anyway, but I believe that would work.

Thanks for the post. The problem is there are other DIVs within the #head div, so the .fadeOut removes that content too.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.