Question

I have some jQuery codes that cycles through a series of divs. I have it so the current div fades out and the next div then fades in in its place. The problem is on the first transition, the visible div doesn’t fade out, it just disappears. After that first transition, the rest of the transitions are smooth with proper fade in/out motion. The following is an example of the divs:

<div id="testimonials">
    <div class="testimony current">
        <p>Text1</p>
    </div>
    <div class="testimony">
        <p>Text2</p>
    </div>
</div>

And the following is the jQuery for the transitions:

$(document).ready(function() {
    var cycle = window.setInterval(next, 6000);

    function next() {
        $('#testimonials .current').removeClass('current').fadeOut(500).next().add('#testimonials div:first').last().fadeIn(2000).addClass('current');
    }
});

You can see the awkward first transition at: http://jrubins.webfactional.com/tamid/vision.php

Answer 1

Change the order of calling fadeOut() and removeClass() methods, try this:

function next() {
   $('#testimonials .current').fadeOut(500, function(){
       $(this).removeClass('current')
   }).next()...
}