JQuery плавный переход

386
19 мая 2018, 18:30

Проблема с плавным переходом картинки, картинка просто меняется и всё, но не плавно.

Вот пример моей попытки:

$("#klubnika").hover(function() {
  $("#klubnika").attr("src","img/team-section/banka-klub.jpg");
    },function() {
          $("#klubnika").attr("src","img/team-section/klubnika.jpg");
    }
);
Answer 1

Как вариант использовать вместо смены атрибута, использовать два изображения и метод fadeOut().

$('#front-side').hover(function() { 
  $('#front-side').fadeOut(1000, "linear"); 
}); 
 
$('#back-side').mouseout(function() { 
  $('#front-side').fadeIn(1000, "linear"); 
});
img { 
  width: 100px; 
  height: 100px; 
  position: absolute; 
} 
 
.wrapper { 
  width: 100px; 
  height: 100px; 
  position: relative; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
  <img id="back-side" src="http://mirpozitiva.ru/uploads/posts/2016-09/1474011210_15.jpg" /> 
  <img id="front-side" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQo4D5EOmasw-Rkq7QXD3V4fW3r5qDxRm9Ke1Rhmjxi3NC6yDiElA" /> 
</div>

READ ALSO
Проблема с jquery json parse
jQuery

Проблема с jquery json parse

При попытке вывести полученный json jquery валится с ошибкой -

 194
Сократить код Jquery
jQuery

Сократить код Jquery

Можно ли как то сократить данный код ? Не очень силён в jquery Спасибо

 202
Поправить HTML5 плеер
jQuery

Поправить HTML5 плеер

Есть некий плеер Codepen Я поставил на страницу 5 таких плееров с разной музыкойПомогите сделать что бы если 1 музыку слушаешь включаешь вторую...

 237
Не работает Jquery код при верстке
jQuery

Не работает Jquery код при верстке

При вёрстке сайта перестала работать JQuery библиотека при написании собственного кодаКарусели Bootstrap работают нормально, а вот, допустим, такой...

 237