Problem with showing / hiding divs

Question

I am trying to show some random images in a div. My HTML code is as follows:

<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> 

I am trying to first shuffle the div "sponsorSlide" and then select 7 of them randomly. I want to show it with fadeIn and fadeOut. Typically, I try to use this code:

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

The main problem is that when the code runs, just before the div disappears, you will see that the images change! But I want to randomize them when they are not visible! I used different ways:

• Delay in different positions and different parts
• Use addClass ("bla", 500)!
• Show (500) / Hide (500)
• fadeIn / fadeOut "sponsorSlide"

FYI, I'm trying to use this concept:

1- display some random images 2- burn out 3- move images 4- Select 7 random div 5- fade 6-go 2

Does anyone have any idea what my main mistake is? Am I doing something wrong? I am confused and I really want to find out how I should try and how I can manage it to work the way I want?

ps: It works without fraud! But I need to fade them.

Answer 1

You must use the callback function to prevent changes from being displayed. If you want to hide -> change -> show, you should do it like this:

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

What happens in function(){//code} will happen ONLY when fadeOut() finishes.