Animate background image change with jQuery
- by Jonathan Lyon
Hi
I finally have this working now but would like to know how I can use JQuery's animate function to make the background image changes fade in nicely when you hover over the list items on the homepage:-
http://www.thebalancedbody.ca/
The Code to make this happen so far is:-
$("ul#frontpage li#277 a").hover(
function () {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg)');
},function () {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
}
);
$("ul#frontpage li#297 a").hover(
function () {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/vibration_training.jpg)');
},function () {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
}
);
etc etc
How would I add the ANIMATE function to this please - thanks!!!
Thanks
Jonathan
