我正在尝试通过 jQuery 在选项卡上产生缓动/淡入淡出效果。我将如何为现有代码添加缓动效果。另外,我怎样才能添加两个 css 类,以便背景随着颜色本身改变颜色?谢谢。
J查询:
$(document).ready(function() {
var origColor = $("#links-top-contact a").css("color");
$("#links-top-contact a").hover(function() {
$(this).css({color:'blue'});
},function() {
$(this).css({color:origColor});
});
})
; CSS
#links-top-contact a{
color:#fff;
font-size:30px;
text-decoration:none;
border:1px solid blue;
padding:-5px 10px 10px 10px;
margin-top:20px;
margin-left:20px;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
-khtml-border-radius:25px;
background-color:red;
}
HTML:
<br/><div id="links-top-contact"><a href="#">yo</a></div>
This是 jsFiddle。
最佳答案
jquery color plugin怎么样? ? Here你可以找到一个例子来说明它是如何工作的。
我更新了你的 jsFiddle这样您就可以看到它在工作。
在您的示例中,它将是这样的:
var origColor = $("#links-top-contact a").css("background-color");
$("#links-top-contact a").hover(function() {
$(this).animate({
backgroundColor: 'blue'
}, 500);
}, function() {
$(this).animate({
backgroundColor: origColor
}, 500)
});
关于javascript - 尝试向 jQuery 选项卡添加缓动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7007951/