Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chase Lester
Chase Lester
10,972 Points

Loop content to fade out before next content fades in?

How would I fix this so the content 2 box doesn't fade in till content 1 box is completely faded out? And so on with content 3 box, and then when it loops again through them?

Here is a CodePen with the example: http://codepen.io/anon/pen/DjmwH

4 Answers

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Something like this?

J Scott Erickson
J Scott Erickson
11,883 Points
J Scott Erickson
J Scott Erickson
11,883 Points

Something like this?

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

        sliderIndex++; 
    }
Chase Lester
Chase Lester
10,972 Points
Chase Lester
Chase Lester
10,972 Points

Yes, thanks!

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

I think you just need to switch around your calls to fadeIn and fadeOut. Also startSlider() doesn't need to be in another function call at the bottom.

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.eq(sliderIndex).fadeIn(1000); // slider image + the next image in the slider 


        infoboxes.fadeOut(1000); 
        sliderIndex++; 
    } 

    resetSlider(); 
} 

startSlider();