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


В предыдущей заметке «Плавная смена картинок» был реализован не универсальный подход в написании скрипта, а именно – не было возможности плавно менять несколько картинок в разных местах странички. По просьбам читателей, код был немного модифицирован, и теперь этот скрипт можно использовать в нескольких местах.

Исправим это!

Рассмотрим сам код:

$(".chimg").click(function () {
var img = $(this).find("img");
var hid = $(this).find("input");
var src = img.attr("src");
var tmp = hid.val();
$(this).fadeOut("slow", function () {
img.attr("src", tmp);
});
$(this).fadeIn("slow");
hid.val(src);
});

Код html для смены картинок:

<p class="chimg"><img src="1.gif" border="0" alt="" />
<input type="hidden" value="2.gif" /></p>

Немного пояснений. На все элементы с классом chimg «навешивается» обработчик click (в нашем примере это <p>). Теперь при нажатии на такой элемент ищется img (наша картинка) и скрытое поле hidden (где мы храним путь к второй картинке). Далее в переменные src и tmp мы сохраняем путь текущей видимой картинки и путь к картинке которую нужно отобразить. Затем запускается эффект fadeOut который плавно скрывает картинку после чего перезаписывает ее путь на путь к новой с ранее сохраненной переменной и запускается эффект fadeIn который плавно показывает уже новую картинку и в скрытое поле hidden заносим путь старой картинки для дальнейшего использования.

p.s. Простите, если пояснение вышло уж сильно дотошным…

Проще, как всегда посмотреть пример «Плавной смены картинок в нескольких местах»

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 5, в среднем: 5.00 из 5)
Loading ... Loading ...


  1. #1 Петр - Август 18th, 2011 at 11:09

    Спасибо nice !!!! Спасибо огромное!!!!!!!!

  2. #2 Никита - Октябрь 7th, 2013 at 17:47

    Спасибо, за скрипт. Но если вас не затруднит, не могли бы вы привести пример для смены 3х, 4х картинок

  3. #3 Aleksey - Февраль 6th, 2015 at 01:44

    А чем это отличается от CSS3, ведь там тоже есть функция для замедления любого процесса с точностью до секунды.

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.