Красивый эффект смены картинок JQuery

В данном уроке рассмотрим реализацию плавной смены картинок при наведении курсора мыши. Очень эффектно. Можно использовать в шапках и логотипах сайтов, а также в навигации сайтов. Реализуем мы это с помощь нами любимого jquery без использования стороних плагонов. И так начнём. Первым делом нам необходимо поместить этот код между тегами.

<script src="jquery-1.3.2.js" type="text/javascript"></script><script type="text/javascript"><!--
$(function () {
  $('#pic a')
    .append('<span class="hover" id="piccolor" />').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);
      $(this).hover(function () {
        $span.stop().fadeTo(1000, 1);
      }, function () {
        $span.stop().fadeTo(1000, 0);
      });
    });
});
// --></script>

Тут все стандартно — подключаем фреймворк и функцию. Далее придаем немного стиля c помощью css:

<!--
body
{
background:#000;
}

#pic
{
width:500px;
height:300px;
margin:auto;
position:relative;
display:block;
}

#pic a
{
background-image:url(1.png);
background-repeat: no-repeat;
position:relative;
display:block;
width:500px;
height:300px;
}

#pic span.hover
{
width:500px;
height:300px;
background-image:url(2.png);
background-repeat: no-repeat;
position:relative;
display:block;
}
-->

И в конце вставляем таким образом само изображение:

<div id="pic"><a href="http://world-pro.ru"></a></div>

Теперь смотрим, что у нас получилось — Посмотреть пример в работе. Все исходники можно скачать — Скачать исходники.

Получился очень красивый эффект. Продолжение следует…