Question

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>
Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top