jquery fadeOut()/fadeIn() 打嗝

Question

我有一些从 htmled 获得的 jquery 代码，用于将照片从一张转换到下一张。但出现的第二张图片只出现了一瞬间，然后就转到下一张图片。之后循环就顺利了，没有问题。

这是 jquery:

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

您可以在此处查看它的实际效果:http://www.zerogravpro.com/yurt/

Answer 1

尝试将所有 JavaScript 移至结束 body 标记之前。

此外，请务必将额外的 jQuery 包装在 $(function() {}); 中，以便在 DOM 准备就绪之前代码不会触发。见下文:

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