divs को दिखाने/छिपाने में समस्या

Question

मैं एक div में कुछ यादृच्छिक छवियां दिखाने की कोशिश कर रहा हूं। मेरे एचटीएमएल कोड इस तरह है:

<div class="sponsors"> 
<div id="sponsorsContent"> 
    <div class="spacer"></div> 
    <div class="sponsorSlide" id="imgageSlide_1"> 
     <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_1.jpg" /><br /> 
     <span class="thumbnail-text">Image Text</span> 
    </div> 
    <div class="spacer"></div> 
    <div class="sponsorSlide" id="imgageSlide_2"> 
     <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_2.jpg" /><br /> 
     <span class="thumbnail-text">Image Text</span> 
    </div> ... </div></div> 

मैं पहली बार फेरबदल "sponsorSlide" divs करने के लिए कोशिश कर रहा हूँ और फिर उनमें से 7 का चयन बेतरतीब ढंग से। मैं इसे फीडइन और फीडऑट के साथ दिखाना चाहता हूं। आम तौर पर, मैं इस कोड कोशिश कर रहा हूँ:

$('#sponsorsContent').addClass('horizontal'); 
$('#sponsorsContent div').addClass('hidden').removeClass('visible'); 
$('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden'); 
setInterval(function(){ 
    $('#sponsorsContent').fadeOut(500); 
    $('#sponsorsContent .sponsorSlide').delay(500).addClass('hidden').removeClass('visible').shuffle(); 
    $('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden').addClass('visible');     
    $('#sponsorsContent').fadeIn(1500); 
}, 5000); 

मुख्य समस्या है, जब कोड चलाता है, वास्तव में से पहले div फ़ेड आउट, आप देख सकते हैं कि छवियों को बदल रहे हैं! लेकिन जब वे दिखाई नहीं दे रहे हैं तो मैं उन्हें यादृच्छिक बनाना चाहता हूं! विभिन्न स्थानों में

• देरी और अलग-अलग हिस्सों
• उपयोग addClass ("bla", 500): मैं अलग अलग तरीकों से इस्तेमाल किया!
• दिखाएँ (500)/छुपाएँ (500)
• fadein/fadeOut "sponsorSlide"

FYI करें, मैं इस अवधारणा के लिए कोशिश कर रहा हूँ:

1- कुछ यादृच्छिक छवियों दिखा 2 - 5- जाना 6- में फीका 2

किसी को भी किसी भी विचार है कि क्या अपने मुख्य गलती है है 3 फेरबदल छवियों 4- करें 7 यादृच्छिक divs बाहर फीका? क्या मैं गलत तरीके से कुछ कर रहा हूं? मुझे उलझन में आया और मैं वास्तव में जानना चाहता हूं, मुझे किस तरह से प्रयास करना चाहिए और मैं इसे जिस तरीके से काम करना चाहता हूं, उसे कैसे प्रबंधित कर सकता हूं?

ps: यह फ़ैडिंग के बिना काम करता है! लेकिन मुझे उन्हें अंदर और बाहर फीका करने की जरूरत है।

Answer 1

परिवर्तन से परिवर्तन को रोकने के लिए आपको कॉलबैक फ़ंक्शन का उपयोग करना चाहिए। आप को छिपाना चाहते हैं -> परिवर्तन -> शो, आप इसे इस तरह से करना चाहिए:

$('#image_div').fadeOut(500, function() { //first fade out! 
    $('#image_div img').attr('src', 'image.jpg'); //only then change the picture 
    $('#image_div').fadeIn(500); //and fade in 
}); 

क्या function(){//code} में आता ही होगा जब fadeOut() समाप्त हो गया है।