Glitch JQuery glitch - sauts

Question

Mon curseur ci-dessous ne semble pas fonctionner correctement. Il y a un petit problème lors de la transition d'une diapositive à l'autre. Voici mon code: https://jsfiddle.net/tiffsaw/6y5Ltvev/

Toute aide serait grandement appréciée. Merci beaucoup!

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

Ce qui se passe parce que le $('.slides').fadeOut(); et la $('.active').fadeIn(); se produisent en même temps. Avant une des diapositives s'efface complètement, l'autre va interrompre le fondu puis fondu dans

Je l'ai fixé en ajoutant simplement un délai au fondu, comme ceci:.

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

Cette fera en sorte que le fondu attend 500 millisecondes avant de déclencher, ce qui permettra au fondu de se produire. Voici un fiddle qui montre cela.

Answer 2

Le problème est votre bloc de diapositives. lors de la première diapositive fadeOut (affichage: aucun). Les diapositives du bas apparaissent et un petit pépin (espace blanc) apparaît pendant l'animation du fondu. Solution: enroulez simplement toutes vos diapositives dans un bloc parent et utilisez le style ci-dessous pour positionner toutes les diapositives par le haut.

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

J'ai mis à jour votre violon. jsFiddle