Question

我正试图通过jQuery对选项卡进行缓和/淡化效果。如何为现有代码添加缓动效果。另外，我怎么能添加两个css类，所以背景颜色和颜色本身一起变色？谢谢。

Jquery的：

$(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插件。我认为这就是你所需要的。

http://plugins.jquery.com/project/animate-to-class

Answer 2

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

Answer 3

您也可以修改背景颜色。

$(this).css({color:'blue',backgroundColor:'green'});

为了方便起见，您可以使用css：hover伪选择器来修改文本/背景颜色，而不是从jQuery执行此操作。

对于缓和/淡化，请查看jQuery的animate和fadeIn fadeOut：jQuery Effects

试图为jQuery选项卡添加缓动效果

3 个答案: