Прототип исчезает черно-белый цвет при наведении мыши - PullRequest
Новая
       19

Прототип исчезает черно-белый цвет при наведении мыши

2 голосов
/ 24 февраля 2011

Я хочу иметь изображение, которое изначально будет черно-белым, но когда я наведу на него курсор, оно исчезнет в цветном изображении.

Я нашел, как это сделать с 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

1 Ответ

2 голосов
/ 24 февраля 2011

Попробуйте это: 

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

document.observe выполняет код, как только DOM готов.

Параметры продолжительности каждого эффекта обрабатываются с помощью свойства duration.

Эффекты добавляются в конец глобальной очереди, поэтому, если кто-то наведет курсор мыши, а затем быстро наведет мышью, произойдет постепенное исчезновение цвета, а затем оно снова станет черно-белым. Потребовался бы дополнительный код, чтобы прервать постепенное исчезновение, чтобы окрасить, и затем исчезнуть к черному.

...