JQuery slider glitch - jumps

Question

My slider below doesn't seem to be working properly. There's a glitch when transitioning from one slide to the other. Here's my code: https://jsfiddle.net/tiffsaw/6y5Ltvev/

Any help would be extremely appreciated. Thank you so much!

$(document).ready(function(){
$('.slides').first().addClass('active');
$('.slides').hide();    
$('.active').show();

$('.right').click(function(){
$('.active').removeClass('active').addClass('oldActive');    
               if ( $('.oldActive').is(':last-child')) {
    $('.slides').first().addClass('active');
    }
    else{
    $('.oldActive').next().addClass('active');
    }
$('.oldActive').removeClass('oldActive');
$('.slides').fadeOut();
$('.active').fadeIn();


  });

});

Answer 1

This is happening because the $('.slides').fadeOut(); and the $('.active').fadeIn(); are happening at the same time. Before one of the slides completely fades out, the other one will interrupt the fade out and then fade in.

I fixed it by simply adding a delay to the fade out, like this:

$('.active').delay(500).fadeIn();

This will make the fade in wait 500 milliseconds before actually triggering, allowing the fade out to happen. Here is a fiddle which shows this.

Answer 2

The problem is your slides block. when first slides fadeOut (display:none). The bottom slides comes up and little glitch (white space) shows during fadeout animation.

Solution: just wrap all your slides in a parent block and use below style to position all slides from top.

.sliderContainer { position: relative;} /*parent container*/
.slides { position: absolute; top: 0; left: 0;} /*postion all slides to top*/

I have updated your fiddle. jsFiddle