jQuery zmiana div background-image z fadeIn/Out

Question

Próbuję utworzyć fadeIn/oddalanie na miejscu stworzyłem (edit: site url skreślony)

Wszystko działa świetnie z wyjątkiem po kliknięciu na jeden z kolory w palecie kolorów, zastępuje obraz bez efektu.

To jest mały skrypt, który napisałem, który jest uruchamiany onclick na jednym z kolorów.

function changeImage(newColor) { 

    //var previousImage = $('#image-holder').css("background-image"); 

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

Próbowałem grać z $('#image-holder').fadeOut(1500) a następnie $('#image-holder').fadeIn(1500) ale działa śmieszne ... to podwójna zanika obraz.

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

Co chciałbym osiągnąć to onclick na pole koloru, aktualny obraz tła będzie Fadeout natomiast nowy obraz tła znikną w.

wiem, że to łatwiejsze do osiągnięcia, że ​​gdybym użyłem dwóch <img src="" /> i przełączam ich wyświetlanie/widoczność, ale niestety nie mogę tak bardzo zmienić HTML, więc szukam rozwiązania opartego na jQuery.

Doceń pomoc!

Answer 1

Rozwiązanie że pracował dla mnie:

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

Answer 2

Dlaczego nie używać jQuery do wstrzykiwania znaczników, których potrzebujesz?

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

Można spróbować coś takiego

Wymień

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

z

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

Regulacja 3000 jako niezbędne do zwiększenia t ilość czasu w animacji.

Całkowicie niesprawdzone

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

Była to jedyna rozsądna rzecz znalazłem zanikać obraz tła.

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

Twój CSS; teraz wzbogacony o CSS3 transition.

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

teraz zamienić się tło

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

Albo zrobić z natywnym javascript

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

voilà, to zanika!

---

Oczywiste Zastrzeżenie: jeśli Twoja przeglądarka nie obsługuje własności CSS3 transition, to nie będzie działać.

Answer 6

Większość rozwiązań po prostu zaniknie w elemencie, a nie w tle. Oznacza to, że twoje informacje są ukryte podczas ładowania tła, co jest często nie tym, czego potrzebujesz.

Napisałem następujące rozwiązanie, które działa poprzez pobranie obrazu tła i dodanie go jako obrazu do elementu. Następnie rozładowuje się, gdy jest załadowany, a cały czas utrzymuje widoczne elementy dziecka.

Dodaje również gif do wstępnego ładowania, który znika po załadowaniu. Być może konieczne będzie przetestowanie z większym obrazem, aby zobaczyć to w akcji.

Kod i skrzypce/opis poniżej.

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>