jQuery悬停，具有背景图像过渡/缓和效果

Question

I'm wondering and have searched all around and can't find the answer. Right now I'm changing a background image using jQuery, on hover. Is it possible to add a transition time in it? Like a fade? ie8 compatible?

Here's the code:

$('.logo').hover(function() {
    $(this).css("background","url('url') no-repeat"); 
},function() {
    $(this).css("background","url('url_hover') no-repeat"); 
});

Answer 1

Since the background image source isn't a property of gradation, maybe make two mock backgrounds positioned behind all elements and fade one out on hover to reveal the one behind it.

You could do something like this - jsFiddle Demo

HTML

<div class="bgFadeToggle">
    <h1>Hello World</h1>
    <div class="bg"><img src="image-1.jpg" /></div>
    <div class="bg"><img src="image-2.jpg" /></div>
</div>

JS

$('.bgFadeToggle').hover(function(){
    $(this).find('.bg:first').stop(true).fadeToggle();
});

CSS

.bgFadeToggle {
    position: relative;
    z-index: 9999;
}

.bgFadeToggle .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bgFadeToggle .bg  {
    z-index: -9998;
}

.bgFadeToggle .bg + .bg {
    z-index: -9999;
}