[JamesW]

I'm trying to fade the background image of my header between several different coloured images using jQuery, I've spent ages trying to work it out myself and can't even manage to find a decent example I could apapt myself.

I've got it working with images inside a Div using a slideslow plugin but I need do it using background images..

I'm not asking for someone to write it for me just to point me in the right direction..

Here are a few random bits of code I'm basically hoping to combine somehow

$(document).ready(function(){
						   
    $(".header").fadeTo(2000, 1).fadeTo(1000,0).fadeTo(2000, 1);
	
});					   

$(this).css({'background' : 'image1.png'});
$(this).css({'background' : 'image2.png'});
// etc.. //

As you've probably already worked out I'm new to jQuery and don't really have a clue what I'm doing

Thanks

[Mark L Bentley]

James,

I would sugggest putting the background images in an array. Then use a for loop to go through the array. Something like.

bkgroundImages = new Array('image1.png', 'image2.png');

for (i=0; i<bkgroundImages.length; i++){

$('.header').css('background', i);

}  

Then you want to add some animation to make them fade in and out. If you wanted it to go back to the beginning you'd have to put an if statement in there too.

[rallport]

JamesW, on 24 December 2009 - 12:58 AM, said:

I'm trying to fade the background image of my header between several different coloured images using jQuery, I've spent ages trying to work it out myself and can't even manage to find a decent example I could apapt myself.

I've got it working with images inside a Div using a slideslow plugin but I need do it using background images..

I'm not asking for someone to write it for me just to point me in the right direction..

Here are a few random bits of code I'm basically hoping to combine somehow

$(document).ready(function(){
					 
 $(".header").fadeTo(2000, 1).fadeTo(1000,0).fadeTo(2000, 1);
	
});				 

$(this).css({'background' : 'image1.png'});
$(this).css({'background' : 'image2.png'});
// etc.. //

As you've probably already worked out I'm new to jQuery and don't really have a clue what I'm doing

Thanks

Can be done in a single line of code using JQuery's innerfade plugin or the minified version of the cycle plugin.

No need to reinvent the wheel