Плавная смена картинок

Плавная смена картинок организовывается на jQuery. Интересный и в то же время легкий прием очень красива дополняет дизайн сайта.

Цель. Создать плавный переход картинок (слоев).

Решение.

Для этого в  jQuery есть:

fadeOut(); - исчезновение

fadeIn();  - появление

используется это так:


<script type="text/javascript">
$(window).load(

function (){
$('#div1').hover(function () { $("#div2").fadeOut(500);},function(){$("#div2").fadeIn(500);})
})

</script>

Суть кода такова, при наведении курсора на слой с идентификатором div1, слой с идентификатором div2 бедет исчезать, а при сведении курсора с этого элемента он будут появляться.

А вот сам html код со слоями:


<div style="border: 1px solid #DC143C; width: 400;">
<div id="div">
<div id="div1" style="background-image: url(/img/picture.png); background-repeat: no-repeat">
<div id="div2" style="background-image: url(/img/picture.png); background-repeat: no-repeat"></div>
</div>
</div>

В результате должно получиться следующее - исходная идея.

Теги:

  1. #1 в Kastoff Alex on декабря 16, 2008 - 18:19

    Все сделал как написано, только чет не работает в фф3. В чем может быть проблема?

    • #2 в on декабря 16, 2008 - 18:59

      Что именно происходит? картинки загружаются? у меня в фф3 работает


SetPageWidth