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
This question is related to
jquery
jquery-animate
It can be done by jquery and css. i did it in a way that can be used in dynamic situations , you just have to change background-image in jquery and it will do every thing , also you can change the time in css.
The fiddle : https://jsfiddle.net/Naderial/zohfvqz7/
Html:
<div class="test">
CSS :
.test {
/* as default, we set a background-image , but it is not nessesary */
background-image: url(http://lorempixel.com/400/200);
width: 200px;
height: 200px;
/* we set transition to 'all' properies - but you can use it just for background image either - by default the time is set to 1 second, you can change it yourself*/
transition: linear all 1s;
/* if you don't use delay , background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time OR more , so there won't be any problems */
-webkit-transition-delay: 1s;/* Safari */
transition-delay: 1s;
}
JS:
$('.test').click(function() {
//you can use all properties : background-color - background-image ...
$(this).css({
'background-image': 'url(http://lorempixel.com/400/200)'
});
});
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;
}
Have a look at this jQuery plugin from OvalPixels.
It may do the trick.
$('.clickable').hover(function(){
$('.selector').stop(true,true).fadeTo( 400 , 0.0, function() {
$('.selector').css('background-image',"url('assets/img/pic2.jpg')");
});
$('.selector').fadeTo( 400 , 1);
},
function(){
$('.selector').stop(false,true).fadeTo( 400 , 0.0, function() {
$('.selector').css('background-image',"url('assets/img/pic.jpg')");
});
$('.selector').fadeTo( 400 , 1);
}
);
The simplest solution would be to wrap the element with a div. That wrapping div would have the hidden background image that would appear as the inner element fades.
Here's some example javascript:
$('#wrapper').hover(function(event){
$('#inner').fadeOut(300);
}, function(event){
$('#inner').fadeIn(300);
});
and here's the html to go along with it:
<div id="wrapper"><div id="inner">Your inner text</div></div>
<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>
Ok, I figured it out, this is pretty simple with a little html trick:
HTML
<body>
<div id="background">.
</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</body>?
javascript
$(document).ready(function(){
$('#background').animate({ opacity: 1 }, 3000);
});?
CSS
#background {
background-image: url("http://media.noupe.com//uploads/2009/10/wallpaper-pattern.jpg");
opacity: 0;
margin: 0;
padding: 0;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
}?
building on XGreen's approach above, with a few tweaks you can have an animated looping background. See here for example:
$(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);
});
Source: Stackoverflow.com