jquery fadeOut () / fadeIn () hoquet - jQuery

J'ai du code jQuery que j'ai reçu de htmled quifait passer les photos d’une à l’autre. Mais la 2e image qui apparaît n'apparaît qu'un instant, puis passe à l'image suivante. Après cela, la boucle est lisse, pas de problèmes.

Voici le jQuery:

$(".fadein img:gt(0)").hide();
setInterval(function () {
$(".fadein :first-child").fadeOut(1500)
.next("img")
.fadeIn(1500)
.end()
.appendTo(".fadein");
}, 4000); // 4 seconds

Vous pouvez le voir en action ici: http://www.zerogravpro.com/yurt/

Réponses:

Essayez de déplacer tous vos scripts Java juste avant la fermeture. body marque.

Assurez-vous également d’envelopper le jQuery supplémentaire dans $(function() {}); le code ne se déclenche donc que lorsque le DOM est prêt. Voir ci-dessous:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".fadein img:gt(0)").hide();

setInterval(function () {
$(".fadein :first-child").fadeOut()
.next("img")
.fadeIn()
.end()
.appendTo(".fadein");
}, 4000); // 4 seconds
});
</script>

$(".fadein img:gt(0)").hide();

Cette ligne ne fonctionne pas car elle est appelée avant que dom ne soit inité. Par conséquent, la deuxième image est affichée initialement à la place de la première, ce qui provoque le hoquet.