原型在鼠標懸停時會褪色爲黑白色

Question

我想要一張初始爲黑色和白色的圖像，但是當我將它懸停在圖像上時，它會褪色到彩色圖像中。

我發現如何用jQuery做到這一點，但是我對原型並不是很好，我也不知道如何將代碼轉換爲與Prototype庫一起工作。任何人都可以幫我嗎？

這裏是jQuery的功能：

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.a").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}); 

}); 
</script> 

這裏是CSS：

<style> 
div.fadehover { position: relative; } 
img.a { position: absolute; left: 0; top: 0; z-index: 10; } 
img.b { position: absolute; left: 0; top: 0; } 
</style> 

，這裏是人體代碼：

<div class="fadehover"> 
<img src="cbavota-bw.jpg" alt="" class="a" /> 
<img src="cbavota.jpg" alt="" class="b" /> 
</div> 

感謝您抽出時間來幫助一個小夥子！ ：d

Answer 1

試試這個：

document.observe('dom:loaded', function() 
{ 
    $$('img.a').first().observe('mouseover', function() { new Effect.Opacity(this, { duration: 1.5, from: 1, to: 0, queue: 'end' }); }) 
     .observe('mouseout', function() { new Effect.Opacity(this, { duration: 1.5, from: 0, to: 1, queue: 'end' }); }); 
}); 

值得注意的幾件事情：

的影響，或動畫中，將試製通過其他庫進行所謂Scriptaculous

的document.observe一旦DOM準備好就執行代碼。

運行每個效果的時間長度參數是通過duration屬性處理的。

將效果添加到全局隊列的末尾，因此，如果有人將鼠標懸停並然後快速移出，則會發生淡入淡出，然後淡出回黑白。這將需要額外的代碼來使其中止淡入淡出並從淡入黑色。