原型在鼠标悬停时会褪色为黑白色

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属性处理的。

将效果添加到全局队列的末尾，因此，如果有人将鼠标悬停并然后快速移出，则会发生淡入淡出，然后淡出回黑白。这将需要额外的代码来使其中止淡入淡出并从淡入黑色。