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函数。

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

见this exapmle。

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

Answer 2

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

$("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
            });    
        });   
});

Answer 3

如果我正确理解了你想要的内容，只需将这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);


    })    
})

jQuery .fadeTo添加元素

3 个答案: