jQuery परिवर्तन div पृष्ठभूमि छवि fadein/आउट

Question

मैं एक साइट पर एक fadein/आउट प्रभाव पैदा करने के लिए मेरे द्वारा बनाए गए कोशिश कर रहा हूँ (संपादित करें: साइट यूआरएल हटाए गए)

सब कुछ छोड़कर अच्छा काम करता है जब आप से एक पर क्लिक कलर पैलेट में रंग, यह छवि को बिना किसी प्रभाव के बदल देता है।

यह एक छोटी सी लिपि है जिसे मैंने लिखा है, जो कि रंगों में से एक पर टकरा गया है।

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) खेलने की कोशिश की लेकिन यह हास्यास्पद कार्य करता है ... यह डबल छवि fades।

$('#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> 

आपका सीएसएस; अब CSS3 transition के साथ बढ़ाया गया है।

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

अब पृष्ठभूमि

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

बाहर स्वैप या देशी जावास्क्रिप्ट

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

Voilà साथ यह करना है, यह fades!

---

स्पष्ट अस्वीकरण: आपके ब्राउज़र 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>