jquery - 鼠标悬停时原型(prototype)将黑白褪色为彩色

Question

我想要一个最初是黑白的图像，但是当我将鼠标悬停在它上面时，它会淡入彩色图像。

我找到了如何使用 jQuery 来做到这一点，但我不太擅长原型(prototype)，而且我不知道如何转换代码以使用原型(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' } ); } );
} );

一些值得注意的事情:

Prototype 中的效果或动画是通过名为 Scriptaculous 的附加库完成的。

一旦 DOM 准备好，document.observe 就会执行代码。

每个效果运行多长时间的参数通过持续时间属性进行处理。

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