带有背景图像的JQuery淡入导航。图像不会褪色，文本会褪色
带有背景图像的JQuery淡入导航。图像不会褪色，文本会褪色
提问于 2013-08-31 22:46:54
我试图在我的导航上使用平滑的JQuery淡入类交换效果。我的问题是，褪色效果只适用于文本，而不是背景图像。如何使背景图像在悬停时与文本一起淡入淡出？
我的CSS：
#nava {
text-align:center;
width: 170px;
height: 110px;
}
.style1 {
background-image: url(buttons/home_off.png);
background-size:170px 110px;
background-repeat:no-repeat;
width: 170px;
height: 110px;
display: block;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
.style2 {
background-image: url(buttons/home_on.png);
background-size:170px 110px;
background-repeat:no-repeat;
width: 170px;
height: 110px;
display: block;
color: #4DAC61;
font-family: Arial, Helvetica, sans-serif;
}我的JQUERY
$(document).ready(function() {
$("#nava a").mouseenter(function () {
$(this).switchClass('style1', 'style2', 200);
});
$("#nava a").mouseleave(function () {
$(this).switchClass('style2', 'style1', 600);
});
});我的HTML
<div id="nava">
<a class="style1" href="index.html"><br /><br /><br />HOME</a>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-01 04:09:48
http://api.jqueryui.com/switchClass/
并不是所有的样式都可以动画化。例如，没有办法动画背景图像。任何不能动画的样式都将在动画的末尾更改。
ps:你可以放置两个元素，一个在另一个之上(一个透明，另一个不透明)，同时改变它们的不透明度。举个例子- http://jsfiddle.net/23HAU/
CSS：
.style1 {
background: url(image1.jpg);
}
.style2 {
background: url(image2.jpg);
display: none;
}
.style1, .style2 {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
}HTML：
<div class='style1'></div>
<div class='style2'></div>和jQuery代码：
$('.style1').fadeOut(2000);
$('.style2').fadeIn(2000);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18553516
复制相关文章
相似问题
腾讯云开发者
