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


    })  
})