#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;
});
Комментарии:
1. Это действительно работает, но я все еще получаю и затухаю после загрузки нового изображения (может быть проблема с Chrome Mac).