JQuery изменить ДИВ фоновое изображение с FadeIn/Out

Question

Я пытаюсь создать FadeIn/Out эффект на сайте я создал (редактировать: сайт URL удален)

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

Это небольшой сценарий, который я написал, который запускается 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()}); 

То, что я хотел бы достичь, это OnClick на коробке цвета, текущее фоновое изображение будет FADEOUT в то время как новый фоновый рисунок будет исчезать в.

Я знаю, что легче добиться того, что если бы я использовал два <img src="" /> и переключил их отображение/видимость, но я, к сожалению, не могу так сильно изменить HTML, поэтому я ищу решение на основе jQuery.

Цените помощь!

Answer 1

Решение, которое работало для меня:

var image = $('#image-holder'); 
    image.fadeOut(1000, function() { 
     image.css("background", "url('images/design-" + newColor + ".jpg')"); 
     image.fadeIn(1000); 
    }); 

Answer 2

Почему бы вам не использовать jQuery для инъекции разметки, которая вам нужна?

var $image_holder = $('#imageHolder'), 
    $carousel_container = $('<div/>').attr('id', 'carousel_container'), 
    images = ['first.jpg', 'second.jpg', 'third.jpg']; 

for (var i=0; i<images.length; i++) 
{ 
    $('<img/>').attr('src', images[i]).appendTo($carousel_container); 
} 

$carousel_container.insertAfter($image_holder); 
$image_holder.hide(); 

Answer 3

Вы можете попробовать что-то вроде этого

Заменить

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");

с

$('#image-holder').animate({background : url('images/design-' + newColor + '.jpg') }, 3000);

Отрегулируйте 3000 по мере необходимости увеличивать т он количество времени в анимации.

Полностью тестировался

Answer 4

var currentBackground = 0; 

var backgrounds = []; 

backgrounds[0] = 'images/BasePic1.jpg'; 

backgrounds[1] = 'images/BasePic2.jpg'; 

backgrounds[2] = 'images/BasePic3.jpg'; 

backgrounds[3] = 'images/BasePic4.jpg'; 

backgrounds[4] = 'images/BasePic5.jpg'; 

function changeBackground() { 

    currentBackground++; 

    if(currentBackground > 4) currentBackground = 0; 

    $('#image-holder').fadeOut(1500,function() { 
     $('#image-holder').css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $('#image-holder').fadeIn(1500); 
    }); 


    setTimeout(changeBackground, 5000); 
} 

$(document).ready(function() { 

    setTimeout(changeBackground, 5000); 

}); 

Answer 5

Это было единственное разумное, что я нашел, чтобы исчезнуть фоновое изображение.

<div id="foo"> 
    <!-- some content here --> 
</div> 

Ваш CSS; теперь расширен с CSS3 transition.

#foo { 
    background-image: url('a.jpg'); 
    transition: background 1s linear; 
} 

Теперь поменять фон

$("#foo").css("background-image", "url(b.jpg)"); 

Или сделать это с родной JavaScript

document.querySelector("#foo").style.backgroundImage = "url(b.jpg)"; 

вуаля, она исчезает!

---

Очевидный отказ от ответственности:, если ваш браузер не поддерживает свойство CSS3 transition, это не будет работать.

Answer 6

Большинство решений просто исчезают в элементе, а не в фоновом режиме. Это означает, что ваша информация скрыта при загрузке фона, что более чем часто не является тем, что вы хотите.

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

Он также добавляет предустановленный gif, который исчезает, когда он загружается. Возможно, вам придется протестировать более крупное изображение, чтобы увидеть это в действии.

Код и скрипка/фрагмент ниже.

jQuery(document).ready(function() { 
 

 
    jQuery('.Loader').each(function(index, el) { 
 

 
    var sBG = jQuery(this).css('background-image'); 
 
    sBG = sBG.replace('url(', '').replace(')', '').replace('"', '').replace('"', ''); 
 

 
    jQuery(this).prepend('<img src="' + sBG + '" id="tmp_' + jQuery(this).attr('id') + '" class="BGImage" />'); 
 
    jQuery(this).css('background-image', 'url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif")'); 
 

 
    jQuery(".BGImage:not(.processed)").each(function() { 
 
     this.onload = function() { 
 

 
     var oElement = jQuery('#' + jQuery(this).attr('id').replace('tmp_', '')); 
 
     jQuery('#' + jQuery(oElement).attr('id')).css('background-image', 'none'); 
 
     oElement.removeClass('Loader'); 
 
     jQuery(this).fadeIn(3000); 
 

 
     } 
 
    }); 
 
    }); 
 

 
});

.Loader { 
 

 
    background-position: center; 
 

 
    background-repeat: no-repeat; 
 

 
    transition: background 0.5s linear; 
 

 
} 
 

 
.BGImage { 
 

 
    position: absolute; 
 

 
    z-index: -1; 
 

 
    display: none; 
 

 
} 
 

 
#Test { 
 

 
    height: 300px; 
 

 
    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTMa7lFP0VdTl63KgPAOotSies-YQ3qSslOuXWE6FnFxJ_EfF7tsA); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="Test" class="Loader">Some text</div>