jQuery .fade添加元素

Question

我试图添加一个小的.fadeTo对我的工作中的小div对象产生影响，但不确定是否可以添加它。我想把这个效果添加到所有的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

如果我正确理解你的问题，你需要将其应用到悬停功能可以发现，

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

ACC或者你的代码，你可以像下面这样调整它，

$(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 2

你可以使用。 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 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); 


    })  
})