Как поменять картинку с анимацией?

Question

Как поменять картинку с анимацией?

Рейтинг: 0Ответов: 1Опубликовано: 08.12.2014

Всем привет.

Есть вот такой код.

Разметка:

 <div class="zoom">
<img src="путь"/>
</div>

Хотелось бы, чтобы при навидении на бок div менялась картинка внутри него. Вот что уже было написано!

$(function(){

    $('.zoom').hover(function(){

            $(this).animate({
                'margin-top':'0px',
                   }, 400);

        },

        function(){
                $(this).animate({
                'margin-top':'40px',
                }, 400);
        });

});

Сделано, для того чтобы при навидении блок отступал сверху и потом обратно! Теперь как получить доступ к картинки в this и поменять атрибут src?

К сожалению, не очень силен в Jquery.

jquery

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Вот пример того, как это делается.

Добавляете в вашу функцию замену атрибута изображения, при наведении и при окончании наведения делаете снова исходную картинку.

$('.zoom').hover(function() {
            $(this).animate({
                'margin-top':'0px',
                   }, 400);
            $(this).find('img').attr('src','путь2');

        },
  function(){
      $(this).animate({
          'margin-top':'40px',
      }, 400);
      $(this).find('img').attr('src','путь1');
});

А вообще анимация, сделанная по hover, выглядит довольно-таки странно, сейчас изменение изображение и сдвиг при наведении можно сделать и на css, вот пример, и работает даже лучше через через jQuery. Почитайте про css transition и css transform, там есть много интересных эффектов.

Как поменять картинку с анимацией?

Ответы