Универсальный GrayScale с плавной работой (затухание и проявление), принцип работы?
 

Приветствую.
Появилась задача сделать скрипт. который бы делал картинки на сайте серыми по-умолчанию (т.е. после загрузи страницы) и цветными при наведении мышкой. Универсального рецепта, который одинаково бы работал во всех браузерах (читай в IE тоже) - не нашел. Если кто-то знает такой скриптег - прошу подсказать. Но это лишь быстрый способ решения проблемы...

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

Я могу сделать черно-белую картинку по наведению/загрузке страницы - не проблема. Но не понимаю как сделать плавный переход от черно-белого состояния к цветному. Каким образом осуществляются подобные плавные переходы? Наложить невидимую цветную картинку поверх серой, и просто плавно проявлять? Т.е. через opacity? Или есть более адекватные и красивые методы?

Если предложенный мною вариант адекватен, то подскажите, пожалуйста, как в Jquery работать с таймерами? Ибо эту часть понимаю плохо :(

Спасибо.

Вполне... :yes:

Там есть эффекты, например
http://jquery-docs.ru/Effects/animat...easingcallback

Почти написал, судя по всему... но прошу помощи. Не получается собрать всё воедино. здесь выложил результат работы, вопросы следующие:

1. Гугл Хром выдает багу, если я создание черно-белых копий вешаю на document.ready(). гугл показал, что ему не нравится что картинки не догрузились. Как победить - не понял, потому пока перевесил всё на кнопку.
2. Не могу понять как правильно в функции прицепленные на hover передать указатель на ту картинку, на которую будет наведена мышь...

Как это всё победить? :(

С помощью простых тестовых примеров, которые выкладывай прямо тут...

Как раз проблема в том, что по-отдельности у меня все работало :(

<script type="text/javascript">
        $(document).ready(function() { 
               $('.gray').hover(hoverIn(this), hoverOut());});
       });
    </script>

Не могу понять как правильно передать указатель на картинку для функции hover, если я передаю this - то передается ссылка на файл (на локальном компе ссылка передается именно на файл html. Вида file:///d:/garbage/.../file.html
Если не передаю ничего, а просто в функции вызываемой hover-ом используют $(this).animate() - то скрипт падает с ошибками. Вывод alert(this) показывает object window.
Как передать внутрь функции вызывающей анимацию ссылку на конкретную картинку? Ибо селектором получить нужный элемент - нереально. На сайте картинок для которых пишется скрипт будет много, и взять конкретную по селектору - невозможно.

Вопрос снят - нашел косяк. И в целом сделал иначе - перевесил привязку hoverа на момент создания элемента. Плюс, как оказалось, нужно делать не

$('.gray').hover(hoverIn(), hoverOut());

а

$('.gray').hover(hoverIn, hoverOut);

Теперь разбираюсь с вызовом функции в правильный момент...

Можно и так

$('.gray').hover(function (){
   hoverIn();
}, function (){
   hoverOut();
});

А еще можно так:

$('.gray').hover(function (){
   (function(){ hoverIn() })();
}, function (){
   (function(){ hoverOut() })();
});

Но.. только зачем?

В моём случае в те функции можно передать параметры.

$('.gray').hover(
    $.proxy(hoverIn, this, arg1, arg2)),
    $.proxy(hoverOut, this, arg1, arg2))
);

ES5:

$('.gray').hover(
    hoverIn.bind(this, arg1, arg2),
    hoverOut.bind(this, arg1, arg2)
);

Но да, анонимные функции тож довольно удобно.