How to fade changing background image
I want to fade the images when I do this code:
$("#large-img").css('background-image', 'url('+$img+')');
I've tried 开发者_StackOverflowputting fade in so many places.
Thanks
This is probably what you wanted:
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);
With a 1 second delay:
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);
Can I offer an alternative solution?
I had this same issue, and fade didn't work because it faded the entire element, not just the background. In my case the element was body, so I only wanted to fade the background.
An elegant way to tackle this is to class the element and use CSS3 transition for the background.
transition: background 0.5s linear;
When you change the background, either with toggleClass or with your code, $("#large-img").css('background-image', 'url('+$img+')');
it will fade as defined by the class.
This was the only reasonable thing I found to fade a background image.
<div id="foo">
<!-- some content here -->
</div>
Your CSS; now enhanced with CSS3 transition.
#foo {
background-image: url(a.jpg);
transition: background 1s linear;
}
Now swap out the background
document.getElementById("foo").style.backgroundImage = "url(b.jpg)";
Voilà, it fades!
Obvious disclaimer: if your browser doesn't support the CSS3 transition
property, this won't work. In which case, the image will change without a transition. Given <1%
of your users' browser don't support CSS3, that's probably fine. Don't kid yourself, it's fine.
Building on Rampant Creative Group's solution above, I was using jQuery to change the background image of the body tag:
e.g.
$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'});
$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'});
I had a javascript timer that switched between the two statements.
All I had to do to solve the issue of creating a fadeOut -> fadeIn effect was use Rampant Creative Group's suggestion and add
transition: background 1.5s linear;
to my code. Now it fades out and in beautifully.
Thanks Rampant Creative Group's and SoupEnvy for the edit!!
Someone pointed me to this thread because I had this same issue but it didn't work for me. After hours of searching I found a solution using this - https://github.com/rewish/jquery-bgswitcher#readme
It has a few other options other than fade too.
Opacity serves your purpose?
If so, try this:
$('#elem').css('opacity','0.3')
If your trying to fade the backgound image but leave the foreground text/images you could use css to separate the background image into a new div and position it over the div containing the text/images then fade the background div.
This may help
HTML
<div id="textcontainer">
<span id="sometext">This is some information </span>
<div id="container">
</div>
</div>
CSS
#textcontainer{
position:relative;
border:1px solid #000;
width :300px;
height:300px;
}
#container{
background-image :url("http://dcooper.org/gallery/cf_appicon.jpg");
width :100%;
height:100%;
}
#sometext{
position:absolute;
top:50%;
left:50%;
}
Js
$('#container').css('opacity','.1');
精彩评论