jQuery Slideshow Image Transition

vous devez afficher l’image suivante avant de commencer à masquer l’image actuelle, vous devez également le faire en même temps, il suffit de remplacer le fadeIn(1000) de l’image .next () par show() , comme ceci http: //jsfiddle.net/nyXUt/6/

J’ai re-factorisé votre code et l’a posté ici:

http://jsfiddle.net/salman/nyXUt/44/

Les principales modifications sont les suivantes:

Solution de contournement en flash blanc : vous utilisiez un fondu en sortie et un fondu en entrée. Lorsque les deux animations sont démarrées ensemble, les deux images deviennent 50% transparentes en un point et la diapositive apparaît blanchâtre (ou couleur d’arrière-plan). J’ai utilisé une autre approche. En utilisant z-index, je place l’image “masquer” devant l’image “afficher”, puis estompe l’image “masquer”:

 #slideshow .current { display: block; z-index: 1; } #slideshow .animate { display: block; z-index: 2; } 

 nextItem.addClass("current"); prevItem.removeClass("current").addClass("animate").fadeOut(animDuration, function () { $(this).removeClass("animate").css("display", ""); }); 

setInterval vs setTimeout : J’ai utilisé setTimeout au lieu de setInterval qui donne plus de contrôle sur le timing. La transition automatique est reprogrammée lorsque l’utilisateur l’interrompt avec les boutons Précédent / Suivant.

.stop() d’animation: j’ai ajouté des rappels et .stop() à l’animation pour éviter le chevauchement des animations.

peut-être minimiser fadeOut() , et fadeIn() time ou fadeOut(slow)

Lorsque vous cliquez sur suivant ou précédent, vous devez arrêter l’intervalle et les animations précédentes, à savoir:

 clearInterval(run); $('#slideshow img').stop(); 

Lorsque le fondu de l’image suivante est terminé, vous redémarrez l’intervalle, c’est-à-dire:

 $('#slideshow img:last').fadeIn(1000, function() { run=setInterval("switchSlide()", speed);}) 

edit: Si vous cliquez 10 fois sur un bouton dans la seconde. Environ 20 animations se dérouleront simultanément.

edit: Si vous cliquez sur suivant ou précédent pendant que l’image bascule (automatiquement ou autrement) et que le fondu est déjà en cours, le fondu passera de presque fondu à complètement fondu en une période d’un effet entier (donc 1 seconde) . Dans ce temps, l’image sera principalement blanche.

Il serait peut-être préférable de régler le fondu sur la commutation manuelle plus rapidement (300 ms ou même moins). Cela améliorera également l’expérience des utilisateurs.

edit: Voici le violon

Voici le code:

 var speed = 4000; run = setTimeout("switchSlide()", speed); $(document).ready(function() { $('#caption').html($('#slideshow img:last').attr('title')); $('#previous').click(switchBack); $('#next').click(switchSlide); }); function switchSlide() { clearInterval(run); $('#slideshow img').stop(true,true); var jq=$('#slideshow img'); jq.first().css({'opacity':0}).appendTo('#slideshow').animate({'opacity':1}, 1000, function() { run = setTimeout("switchSlide()", speed); } ); $('#caption').html(jq.last().attr('title')); } function switchBack() { clearInterval(run); $('#slideshow img').stop(true,true); var jq=$('#slideshow img'); jq.last().animate({'opacity':0},1000, function() { $(this).prependTo('#slideshow').css({'opacity':1}); run = setTimeout("switchSlide()", speed);}); $('#caption').html(jq.get(1).title); } 

Vous pouvez essayer d’utiliser la fonction de délai qui fonctionne (uniquement) avec les animations jQuery.

 $('#slideshow img:first').fadeOut(1000).next().delay(1000).fadeIn(1000).end().appendTo('#slideshow'); 

Mais la meilleure façon si vous utilisez les rappels fournis comme indiqué par d’autres commentateurs ici.

Le problème est que vous effectuez un fondu en même temps que le fondu. À l’aide des fonctions d’accélération standard, il y a un point au milieu où les deux images sont à peine visibles et où il rest un espace blanc.

Pour résoudre ce problème, j’ai inversé l’ordre des images afin que l’image visible se trouve au-dessus de la stack. Nous pouvons maintenant placer la nouvelle image par-dessus l’image actuellement visible et la faire apparaître en fondu. Une fois la nouvelle image entièrement visible, nous masquons l’image précédente. Cela rend la transition beaucoup plus douce.

 $('#slideshow img:first').appendTo('#slideshow'); $('#slideshow img:last').fadeIn(1000, 'swing', function() { $('#slideshow img:last').prev().hide(); }); 

Voici un jsfiddle: http://jsfiddle.net/nyXUt/52/