Добавление затухания в jQuery image swap

#jquery #image #fadein #fade

#jquery #изображение #затухание

Вопрос:

Я создаю приложение для отображения разных цветов автомобиля при нажатии на образец цвета. Я создал jQuery, чтобы красиво менять изображение на основе образца, на который нажимается.

Тем не менее, я изо всех сил пытаюсь сделать так, чтобы новое изображение красиво исчезало поверх того, которое уже видно.

 $('a.swatchItem').click(function() { // on click of swatch
    var carID = $(this).attr('id'); // grab the clicked ID
    $('a.swatchItem').removeClass('active'); // Remove active class
    $(this).addClass('active'); // Add active class to current swatch
    $("#carItem").attr('src',"img/models/longtitude/"   carID   ".png"); // replace with new car image
    return false;
});

Спасибо

Ответ №1:

Вы можете попробовать с этим:

 $('a.swatchItem').click(function() { // on click of swatch
  var carID = $(this).attr('id'); // grab the clicked ID
  $('a.swatchItem').removeClass('active'); // Remove active class
  $(this).addClass('active'); // Add active class to current swatch
  $("#carItem").fadeOut('fast', function(){
      $(this).attr("src", "img/models/longtitude/"   carID   ".png").fadeIn();
  }); // replace with new car image
  return false;
});

Простая демонстрация скрипки.

1. Я собираюсь отметить это как правильное, потому что вы ответили на мой вопрос. (Очень небольшая) проблема заключается в том, что он затем исчезает (чтобы вы могли кратко увидеть фон). Что я имел в виду, но не объяснил должным образом, так это то, что я хотел, чтобы новое изображение затухало сверху, чтобы это был плавный переход, не видя никакого фона. Я мог бы использовать ваш пример и каким-то образом использовать некоторые z-индексы 🙂

Ответ №2:

Разбейте его на шаги:

Затухание изображения
Дождитесь завершения затухания
Измените src
Дождитесь загрузки изображения
Затухание в

Демонстрация: http://jsfiddle.net/abhitalks/EqEma /

Вы можете выполнить шаги с 1 по 3, используя тот же обработчик, что и вы:

 $('a.swatchItem').click(function() { 
    // fade the image out
    $("#carItem").fadeOut(function() {
        // on completion change the src
        $("#carItem").attr('src', "...");     
    });
    return false;
});

Для шагов 4 и 5 добавьте обработчик к самому изображению:

 $("#carItem").load(function() {
    // once the image is loaded, fade it back in
    $(this).fadeIn()
});

Редактировать:

Вы можете не дожидаться завершения затухания на самом деле. Может пропустить шаг 2. Изображение может загружаться вместе с анимацией затухания.

Демонстрация 2: http://jsfiddle.net/abhitalks/EqEma/1 /

 $('a.swatchItem').click(function() { 
    $("#carItem").fadeOut();
    $("#carItem").attr('src', "...");   
    return false;
});