0

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

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

$("#klubnika").hover(function() {
  $("#klubnika").attr("src","img/team-section/banka-klub.jpg");
    },function() {
          $("#klubnika").attr("src","img/team-section/klubnika.jpg");
    }
);
2
  • Как я понял, вы хотите по наведению мыши сменить картинку, возможно проще это будет сделать средствами css, или для этой задачи вам обязательно использовать jQuery? 14 мая 2018 в 4:59
  • Jquery)) Просто на нём учусь 14 мая 2018 в 5:01

1 ответ 1

2

Как вариант использовать вместо смены атрибута, использовать два изображения и метод 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>

7
  • что то ваш пример не работает...в ubuntu firefox
    – user33274
    14 мая 2018 в 5:54
  • Честно, не могу проверить в ubuntu firefox, под windows все работает, если у вас есть какое-то решение этой проблемы, то можете дать рекомендации по их устранению, или опубликовать свой ответ на данный вопрос лишенный данного недостатка. 14 мая 2018 в 5:59
  • прошу прощения - работает - только в одну сторону , потому и не заметил - извените
    – user33274
    14 мая 2018 в 6:01
  • 1
    @МаксимЛенский ничего страшного, заодно решил добавить переход в обратную сторону, так даже лучше, так что спасибо. 14 мая 2018 в 6:29
  • + от меня ... это возращает первую картинку mouseout ?
    – user33274
    14 мая 2018 в 6:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.