最簡單的漸變腳本

Question

我正在尋找腳本，就像Dribbble一樣工作（當鼠標懸停時出現重疊）。 但它必須是多...我的意思是用於網站上的許多圖像。儘可能簡單。

謝謝！

Answer 1

使用jQuery和hover()鼠標事件，你可以實現你想要的行爲。

$("img").hover(function() { //select the image which is hovered 
    $(this).css("opacity","0.5"); //apply opacity for this image 

}, function() { 
    $(this).css("opacity","1"); //change to opacity to default 
}); 

演示：http://jsfiddle.net/mVWdQ/

對於selector，可以使用其中只用於所需的圖像，而不是一個element作爲img使用class。

另一種方法是使用animate()。

$("img").hover(function() { 
    $(this).animate({opacity:0.5},500); 

}, function() { 
    $(this).animate({opacity:1},500); 
}); 

演示：http://jsfiddle.net/mVWdQ/1/