javascript - 尝试向 jQuery 选项卡添加缓动效果

Question

我正在尝试通过 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。

Answer 1

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)
});