Совершенно случайно было найдено в сети маленькое 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
, чтобы не было конфликта с другими библиотеками, использующими этот знак.
Может кто подскажет, как вставить этот код в вордпрес или джумлу???
Вам нужно вставить анимацию в содержание (статья, заметка и т.д.) сайта или в его оформление (лого, фон и т.д.)?
В зависимости от ответа, дам вам необходимые рекомендации.