CODEWITHSUNDEEP
jqueryfadeinfadeout
Chipe
Chipe

Reputation: 4811

How to get first content to fade completely out before next content fades in?

I cant figure out how to get the first content to fade completely out before the next content fades in. Here is a js fiddle and what you will see is "content 2" box fades in before the "content 1" box fades completely out. Is there a way to have "content 1" fade completely out before "content 2" fades in, and then "content 3"?

http://jsfiddle.net/m2Sm7/1/

Thanks for any help!

Here is the JS also:

function startSlider(){ 

// timer 
var loop = 0; 

// get total boxes 
var count=$('.count .company').length; 

// slide index 
var sliderIndex = 0; 

// info boxes 
var infoboxes = $("#about_cont").find(".count"); 

function resetSlider() { 
    window.clearInterval(loop); 
    moveSlider(); 
    loop=window.setInterval(moveSlider, 2000); 
} 

function moveSlider() { 
    if(sliderIndex == count){ //will reset to first image when last image fades out 
        sliderIndex = 0; 
    } 
    infoboxes.fadeOut(1000); 
    infoboxes.eq(sliderIndex).fadeIn(1000); // slider image + the next image in the slider 

    sliderIndex++; 
} 

resetSlider(); 
} 

$(function() { 
    startSlider(); 
});

Upvotes: 1

Views: 41

Answers (1)

Yes Barry
Yes Barry

Reputation: 9856

You can do that using the callback.

infoboxes.fadeOut(1000, function() {
    infoboxes.eq(sliderIndex).fadeIn(1000);
});

From their documentation:

Callback Function

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

More info here.

UPDATE: http://jsfiddle.net/m2Sm7/6/

I rewrote your interval like this:

var cur = infoboxes.first(), first = cur;
cur.fadeIn();
var interval = setInterval(function() {
    var next = cur.next();
    if (!(next.length > 0)) {
        next = first;
    }
    
    cur.stop(true, true).fadeOut(1000, function() {
        next.fadeIn(500);
    });
    
    cur = next;
    if (++count >= 50) {
        clearInterval(interval);
    }
}, 2000);

Upvotes: 1

Related Questions