jquery - jquery在两个类之间动画背景图像

Question

我已经有一段时间没有编程了，对此我不太了解。

我有一个 div，有两个类。悬停时，我想切换背景图像，使用 CSS 轻松完成。

但我希望它具有淡化效果。我虽然这与使用toggleClassjQuery UI 一样简单，但它并没有达到预期的效果。

$(".clicker").hover( function() {
    $(this).parent().toggleClass("anim", 500);
});​

如何获得两个类之间的淡入淡出效果？

现场示例在这里。

谢谢 ：）

Answer 1

但是 jQuery UI 可以制作切换动画background-image吗？

我更喜欢使用简单的褪色效果：

$(".clicker").hover(function() {
    $(this).parent().fadeOut(500, function() {
        $(this).toggleClass("anim").fadeIn(500);
    });
});​

演示：http: //jsfiddle.net/VfqLA/2/

Answer 2

jsBin 演示

使用两个 DIV，并切换内部 DIV 的可见性 ( #lighter_2)

<div id="lighter">     
    <div id="lighter_2"></div>     
    <p class="clicker">Darkspore</p>
</div>

CSS：

#lighter{
    position:relative;
    background: url(http://placehold.it/250x250/f0f);
    width: 100%;
    height: 400px;
}

#lighter_2{
    display:none;
    position:absolute;
    background: url(http://placehold.it/250x250/cf5);
    width: 100%;
    height: 400px;
}

.clicker{
    position:relative;
    z-index:2;
    background: #fff;
    cursor:pointer;
}

只需打开那个 divhover

$('.clicker').hover(function(){
  $('#lighter_2').stop().fadeTo(800,1);
},function(){
  $('#lighter_2').stop().fadeTo(800,0);
});

Answer 3

您将使用 .fadeIn() 和 .fadeOut() 参见：http ://api.jquery.com/fadeOut/

注意 您可以使用 fadeOut() 旧的，然后在下一个调用中使用新的 fadeIn()，如果这就是您想要的，这应该转换两者。