497 Совершенно случайно было найдено в сети маленькое jQuery руководство по плавной смене изображений при наведении курсора мышки.
В этом примеры мы будем менять черно-белое изображение на цветное. Для получения такого эффекта мы будем использовать функцию .
Существуют тонны реализаций данной функции, но для этого приложения будем использовать базовый функционал.
Сначала качаем . Прикрепляем jQuery в head разделе вашего сайта.
|
1 |
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script> |
Теперь функция.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
И HTML код в body сайта.
|
1 2 3 4 |
<div class="fadehover"> <img src="cbavota-bw.jpg" alt="" class="a" /> <img src="cbavota.jpg" alt="" class="b" /> </div> |
В результате получился следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery Hover Effect</title> <script type='text/javascript' src='jquery.js'></script> <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> <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> </head> <body> <div class="fadehover"> <img src="cbavota-bw.jpg" alt="" class="a" /> <img src="cbavota.jpg" alt="" class="b" /> </div> </body> </html> |
Примечание: Если вы используете jQuery в WordPress, то вам нужно заменить все знаки доллара ($) на слово jQuery, чтобы не было конфликта с другими библиотеками, использующими этот знак.
Может кто подскажет, как вставить этот код в вордпрес или джумлу???
Вам нужно вставить анимацию в содержание (статья, заметка и т.д.) сайта или в его оформление (лого, фон и т.д.)?
В зависимости от ответа, дам вам необходимые рекомендации.