Question

我在这里有一个淡入/淡出jQuery示例： http://jsfiddle.net/mcgarriers/NJe63/6/

但是，我想知道是否可以用背景图片替换背景颜色红色效果？

非常感谢任何指针

Answer 1

你可以用CSS3做到这一点。您可以在图像周围创建一个div标签，然后使用基本的CSS3过渡。

  #yourdiv a {
     background-color: #FFF;
}

#yourdiv a:hover {
     background-color: #000;
     -webkit-transition: background-color 600ms linear;
     -moz-transition: background-color 600ms linear;
     -o-transition: background-color 600ms linear;
     -ms-transition: background-color 600ms linear;
     transition: background-color 600ms linear;
}

或者你可以用CSS3将图像淡入另一个图像： http://css3.bradshawenterprises.com/cfimg1/

Answer 2

尝试这样的事情怎么样？

我改变了jsfiddle链接中的代码。

$('.box').mouseenter(function(){
    $(this).stop().animate({opacity: 0}, 0).css('background', 'url(http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg)').animate({ opacity: 1 }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({opacity: 1}, 0).css('background', 'white');
});

Answer 3

你不能淡化/淡出HTML元素的背景图像，但你可以使用背景色。

它可能是你的解决方案吗？ Fade background image in and out with jQuery?

用jQuery动画效果替换背景颜色与背景图像

3 个答案: