Animate background image change with jQuery
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
Solution 1:
I don't think this can be done using jQuery's animate function because the background image does not have the necessary CSS properties to do such fading. jQuery can only utilize what the browser makes possible. (jQuery experts, correct me if I'm wrong of course.)
I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.
Solution 2:
building on XGreen's approach above, with a few tweaks you can have an animated looping background. See here for example:
http://jsfiddle.net/srd76/36/
$(document).ready(function(){
var images = Array("http://placekitten.com/500/200",
"http://placekitten.com/499/200",
"http://placekitten.com/501/200",
"http://placekitten.com/500/199");
var currimg = 0;
function loadimg(){
$('#background').animate({ opacity: 1 }, 500,function(){
//finished animating, minifade out and fade new back in
$('#background').animate({ opacity: 0.7 }, 100,function(){
currimg++;
if(currimg > images.length-1){
currimg=0;
}
var newimage = images[currimg];
//swap out bg src
$('#background').css("background-image", "url("+newimage+")");
//animate fully back in
$('#background').animate({ opacity: 1 }, 400,function(){
//set timer for next
setTimeout(loadimg,5000);
});
});
});
}
setTimeout(loadimg,5000);
});
Solution 3:
<style type="text/css">
#homepage_outter { position:relative; width:100%; height:100%;}
#homepage_inner { position:absolute; top:0; left:0; z-index:10; width:100%; height:100%;}
#homepage_underlay { position:absolute; top:0; left:0; z-index:9; width:800px; height:500px; display:none;}
</style>
<script type="text/javascript">
$(function () {
$('a').hover(function () {
$('#homepage_underlay').fadeOut('slow', function () {
$('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg")' });
$('#homepage_underlay').fadeIn('slow');
});
}, function () {
$('#homepage_underlay').fadeOut('slow', function () {
$('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg")' });
$('#homepage_underlay').fadeIn('slow');
});
});
});
</script>
<body>
<div id="homepage_outter">
<div id="homepage_inner">
<a href="#" id="run">run</a>
</div>
<div id="homepage_underlay"></div>
</div>
Solution 4:
I had the same problem, after loads of research and Googling, I found the following solution worked best for me! plenty of trial and error went into this one.
--- SOLVED / SOLUTION ---
JS
$(document).ready(function() {
$("header").delay(5000).queue(function(){
$(this).css({"background-image":"url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"});
});
});
CSS
header {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
transition:all 1s ease-in;
}