Question

我已经离开了一段时间的编程，并且不能完全理解这一点。

我有一个div，有两个班级。在悬停时，我想切换bg图像，轻松完成CSS。

但我希望它具有淡化效果。我虽然这对于使用toggleClass和jQuery UI一样容易，但它没有达到预期的效果。

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

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

Live example here

谢谢：）

Answer 1

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

我更喜欢使用简单的淡化效果：

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

DEMO： http://jsfiddle.net/VfqLA/2/

Answer 2

jsBin demo

使用两个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;
}

只需在hover

上切换该div

$('.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（）new，这应该转换两个，如果这就是你想要的。

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

3 个答案:

jsBin demo