Jquery动画实现元素1显示5秒淡出后淡入元素2并停止，解决循环问题

• 你使用了setInterval定时器，该方法默认会按照设定的间隔无限重复执行回调函数，没有配置执行停止的逻辑
• 代码中else分支将currentContent重置为0，导致切换完第二个元素后会重新切回第一个元素，造成循环效果

仅调整JS部分逻辑即可，核心修改两点：1. 切换到第二个元素后停止定时器 2. 删除重置currentContent的循环逻辑，也可以直接用只会执行一次的setTimeout替代setInterval，更匹配你的需求。

修改后的完整JS代码 #

$(document).ready(function() {
  $('.no-js').removeClass('no-js'); /* JS is enabled */
  var currentContent = 0;
  var nbContent = $('.content').length;
  $('.content').eq(currentContent).removeClass('off').addClass('on');

  function changeContent() {
    currentContent++;
    // 仅在还有未展示的元素时执行切换
    if (currentContent < nbContent) {
      $('.on').toggleClass('off').toggleClass('on');
      $('.off').eq(currentContent).toggleClass('off').toggleClass('on');
    }
  }
  // 用setTimeout替代setInterval，只会执行一次，无需额外清除
  setTimeout(changeContent, 5000);
});

替换setInterval为setTimeout后，changeContent方法只会在页面加载完成5秒后执行1次，执行切换后currentContent变为1，等于总元素数2，不会触发任何额外逻辑，元素2会一直保持显示状态，不会再发生切换。

如果你想保留setInterval的写法，也可以在切换到最后一个元素时手动清除定时器，修改changeContent逻辑即可：

function changeContent() {
  currentContent++;
  if (currentContent < nbContent) {
    $('.on').toggleClass('off').toggleClass('on');
    $('.off').eq(currentContent).toggleClass('off').toggleClass('on');
    // 已经切换到最后一个元素，清除定时器停止循环
    clearInterval(tempo);
  }
}
tempo = setInterval(changeContent, 5000);

内容的提问来源于stack exchange，提问作者willothewisp