jQuery .fadeTo 添加元素

Question

我试图在我的工作中对一个小的 div 对象添加一个小的 .fadeTo 效果，但不确定我是否可以以及在哪里添加它。我想将此效果添加到所有的 div。我希望它 .fadeTo (500)

这是我的 jsfiddle 的链接:

$(document).ready(function() {
    $('div').bind("mouseenter", function(){
        var color  = $(this).css("background-color");


        $(this).css("background", "#53b9ab");


        $(this).bind("mouseleave", function(){
            $(this).css("background", color);

        })    
    })    
})

我正在寻找的效果将用于社交媒体图标 我想要的确切效果可以在这些社交媒体图标上找到 http://www.coletownsend.com

Answer 1

您可以使用 . animate jQuery 函数。

Description: Perform a custom animation of a set of CSS properties.

参见 this例子。

我已经编辑了你的代码。查看结果here ，并检查 HTML 和 Javascript 代码。

这是 jQuery 代码:

var color;
var fadeTime = 200;

$('div').bind("mouseenter", function(){
    color  = $(this).css("background-color");
    $(this).animate({backgroundColor: "#53b9ab"}, fadeTime);
});

$("div").bind("mouseleave", function(){
    $(this).animate({backgroundColor: color}, fadeTime);           
});