i11usive Posted June 16, 2010 Share Posted June 16, 2010 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 More sharing options...
0 DeathLace Posted June 17, 2010 Share Posted June 17, 2010 setInterval(function() { $("#head").fadeOut('slow', function() { $("#head").css("background-image", "url(" + bgArr[i] + ")"); (i < 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 More sharing options...
0 i11usive Posted June 18, 2010 Author Share Posted June 18, 2010 setInterval(function() { $("#head").fadeOut('slow', function() { $("#head").css("background-image", "url(" + bgArr[i] + ")"); (i < 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 More sharing options...
0 DeathLace Posted June 18, 2010 Share Posted June 18, 2010 Any chance you could show the full code? Or a link to the site (even better!) Link to comment Share on other sites More sharing options...
Question
i11usive
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