jquery - 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

您可以使用 。动画jQuery 函数。

描述：执行一组 CSS 属性的自定义动画。

请参阅此示例。

我已经编辑了你的代码。在此处查看结果，并检查 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);           
});

Answer 2

通过将这两行添加到您现有的代码中，如果我正确理解您想要的内容，您可以实现它。

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

      $(this).css("background", "red");
      $(this).css("opacity", 0);  
      $(this).fadeTo(500,1);


    })    
})

Answer 3

如果我正确理解您的问题，您需要将其应用于悬停功能，

$("div").hover(function(){
    $("div").css("background-color", "orange").fadeIn("slow");
}, function() {
    $("div").css("background-color", "lime").fadeOut("slow");
});

根据您的代码，您可以像下面这样调整它，

$(document).ready(function() {
     $('div').bind("mouseenter", function(){
            var color  = $(this).css("background-color");
            $(this).css("background", "#53b9ab").fadeIn('slow', 0.7); 
            $(this).bind("mouseleave", function(){
                $(this).css("background", color).fadeTo('slow', 0.5); // partial fading
            });    
        });   
});