Медленно меняйте/стирайте/анимируйте изменение изображения с помощью JQuery

Ответ 1

Вы можете начать с первого исчезновения изображения, контролируя продолжительность fadeout с использованием первого необязательного параметра. После завершения затухания произойдет анонимный обратный вызов, а источник изображения будет заменен новым. Затем мы исчезаем на изображении, используя другое значение продолжительности, измеренное в миллисекундах:

Оригинальный HTML:

<img src="one.png" id="one" />

JavaScript:

$('#one').hover(function() {

    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

Наконец, используя jQuery, гораздо проще связывать события JavaScript динамически, без использования каких-либо атрибутов JavaScript в самом HTML. Я изменил оригинальный тег img так, чтобы он имел только атрибуты src и id.

Событие jQuery hover гарантирует, что функция срабатывает, когда пользователь наводится на изображение с помощью мыши.

Для получения дополнительной информации см. также jQuery fadeOut и jQuery fadeIn.

Возможные проблемы с временем загрузки изображений:

Если это первый раз, когда пользователь зависает над изображением и делает запрос на него, может быть небольшой сбой в фактическом fadeIn, так как будет время ожидания от сервера, когда он запрашивает newImage.png. Обходным путем для этого является предварительная загрузка этого изображения. Есть несколько ресурсов на fooobar.com/questions/12594/....

Ответ 2

попробуйте это

<img class="product-images-cover" src="~/data/images/productcover.jpg" />
<div class="list-images-product">
 <div>
   <img class="thumbnail" src="~/data/images/product1.jpg" />
 </div>
 <div>
   <img class="thumbnail" src="~/data/images/product2.jpg" />
 </div>
</div>

$(document).ready(function () {
    $(".list-images-product .thumbnail").click(function (e) {
        e.preventDefault();
        $(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250);
    });
});

Ответ 3

В дополнение к @jmort253 было бы неплохо, если вы добавите min-height до исчезновения. В противном случае вы можете заметить дрожь для чувствительных изображений.

Мое предложение было бы

$('#one').hover(function() {
    // add this line to set a minimum height to avoid jerking
    $('#one').css('min-height', $('#one').height());
    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

Ответ 4

При изменении источника изображения через jquery требуется время загрузки, что приводит к некоторым мерцающим эффектам. Я изменил приведенный выше код, чтобы решить проблему.

$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() {
  $(".list-images-product .thumbnail").attr("src",newsrc);
  $(".list-images-product .thumbnail").on('load', function(){
    $(".list-images-product .thumbnail").fadeTo(500,1);
  });
 });