0

I have a div with multiple background-images. I also have a script to change those images every X seconds. I just want to add a simple fade transition, instead of the instant change I get with this script alone. Can I just add a simple line of code to make this work? Your help is greatly appreciated. I am a beginner! Heres the script:

<script  type="text/javascript">
var now = 0;
var int = self.setInterval("changeBG()", 2000);
var array = ["jar1.jpg", "field.jpg",];

function changeBG(){
    //array of backgrounds
    now = (now+1) % array.length ;
    $('#maincontent').css('background-image', 'url("photos/' + array[now] + '")');

}
</script>
David
  • 151
  • 2
  • 11

1 Answers1

0

David!

saw your comment in the other question, thought I might as well have a look. A 'simple' way of cross-fading in jQuery is described in the following link, maybe that can help you on your way?

http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

Good luck

Joost
  • 28
  • 5
  • Wow thanks! After a bit of tweaking I managed to implement that! Thank you very very much! – David Apr 03 '13 at 11:33
  • Only problem is that script runs once then stops at the last image. How can I get it to refresh at the top of the list again? – David Apr 03 '13 at 11:48
  • Yeah, I stumbled onto that one as well. I think you have to check if it's the last image in the row/list, (check .next('file/element-type')) and if not, go to first (.first()). You can find the exact markup on the jQuery site! – Joost Apr 04 '13 at 13:47