Я пытаюсь создать эффект fadeIn/Out на созданном мной сайте (изменить: URL-адрес сайта удален)
Все работает отлично, за исключением случаев, когда вы нажимаете один из цветов в цветовой палитре, он не заменяет изображение без эффекта.
Это маленький script, который я написал, который запускается onclick на одном из цветов.
function changeImage(newColor) {
//var previousImage = $('#image-holder').css("background-image");
$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");
};
Я пробовал играть с $('#image-holder').fadeOut(1500)
, а затем $('#image-holder').fadeIn(1500)
, но он действует смешно... он удваивает изображение.
$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')").fadeOut(function(){$(this).fadeIn()});
То, что я хотел бы достигнуть, - это щелкнуть по цветной рамке, текущее фоновое изображение будет исчезать, в то время как новое фоновое изображение будет исчезать.
Я знаю, что это легче достичь, если бы я использовал два <img src="" />
и переключил их отображение/видимость, но я, к сожалению, не могу так сильно изменить HTML, поэтому я ищу решение на основе jQuery.
Цените помощь!