Question

我有一个淡出的div显示评论并循环它们，使它们弹出并淡入/淡出到下一个。但不知何故，只有正确的div才会循环，而左边的div只会在进入display: none;之前播放所有的评论，而不是循环播放脚本。

任何人都知道它为什么不做它应该做的事情？

$(window).load(function() {
  $('img.bgfade').hide();
  var dg_H = $(window).height();
  var dg_W = $(window).width();
  $('#wrap').css({
    'height': dg_H,
    'width': dg_W
  });

  function anim() {
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(5000);
    $("#wrap img").first().fadeIn(5000);
    setTimeout(anim, 5000);
  }
  anim();
})
$(window).resize(function() {
  window.location.href = window.location.href
})


$(document).ready(function() {
  var allBoxes = $("div.boxes-left").children("div");
  transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
  function next() {
    var nextTo;
    if (to.is(":last-child")) {
      nextTo = to.closest(".boxes-left").children("div").first();
    } else {
      nextTo = to.next();
    }
    to.fadeIn(3000, function() {
      setTimeout(function() {
        transitionBox(to, nextTo);
      }, 6000);
    });
  }

  if (from) {
    from.fadeOut(3000, next);
  } else {
    next();
  }
}

$(document).ready(function() {
  var allBoxes = $("div.boxes-right").children("div");
  transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
  function next() {
    var nextTo;
    if (to.is(":last-child")) {
      nextTo = to.closest(".boxes-right").children("div").first();
    } else {
      nextTo = to.next();
    }
    to.fadeIn(2000, function() {
      setTimeout(function() {
        transitionBox(to, nextTo);
      }, 3000);
    });
  }

  if (from) {
    from.fadeOut(3000, next);
  } else {
    next();
  }
}

#leftmenu {
  float: left;
  margin-left: 70px;
  font-size: 30px;
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
#rightmenu {
  float: right;
  margin-right: 70px;
  font-size: 30px;
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
#container {
  width: 1000px;
  z-index: 100;
  position: relative;
  margin: 400px auto 0;
}
#left {
  float: left;
  width: 250px;
  height: 200px;
  position: relative;
}
#right {
  float: right;
  width: 250px;
  height: 200px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    <div class="boxes-left">

      <div class="box1">
        <h3>Review #1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
      </div>

      <div class="box2">
        <h3>Review #2</h3>
        <p>Ayy lmao ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
      </div>

      <div class="box3">
        <h3>Review #3</h3>
        <p>Aeouoi sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
      </div>

    </div>
  </div>


  <div id="right">
    <div class="boxes-right">

      <div class="box1">
        <h3>Review #1</h3>
        <p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesqu Duis sit amet pretium sapien.</p>
      </div>

      <div class="box2">
        <h3>Review #2</h3>
        <p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
      </div>

      <div class="box3">
        <h3>Review #3</h3>
        <p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
      </div>

    </div>

  </div>


</div>

奖金问题：我想在整个事情面前放一个setTimeout函数但是当我尝试它时会给我一个错误。我将如何开展这项工作？

Answer 1

这里的问题是你已经定义了函数transitionBox两次，一次使用左逻辑然后使用正确的逻辑，所以第二种是覆盖第一种，所以当到达最后一个元素时只有右面板逻辑被执行。

＆＃13;

$(document).ready(function() {
  var allBoxes = $("div.boxes-left").children("div");
  transitionBox1(null, allBoxes.first());
});

function transitionBox1(from, to) {
  function next() {
    var nextTo;
    if (to.is(":last-child")) {
      nextTo = to.closest(".boxes-left").children("div").first();
    } else {
      nextTo = to.next();
    }
    to.fadeIn(3000, function() {
      setTimeout(function() {
        transitionBox1(to, nextTo);
      }, 6000);
    });
  }

  if (from) {
    from.fadeOut(3000, next);
  } else {
    next();
  }
}

$(document).ready(function() {
  var allBoxes = $("div.boxes-right").children("div");
  transitionBox2(null, allBoxes.first());
});

function transitionBox2(from, to) {
  function next() {
    var nextTo;
    if (to.is(":last-child")) {
      nextTo = to.closest(".boxes-right").children("div").first();
    } else {
      nextTo = to.next();
    }
    to.fadeIn(2000, function() {
      setTimeout(function() {
        transitionBox2(to, nextTo);
      }, 3000);
    });
  }

  if (from) {
    from.fadeOut(3000, next);
  } else {
    next();
  }
}

＆＃13;

#right {
  background-color: red;
}
#left {
  background-color: green;
}
#leftmenu {
  float: left;
  margin-left: 70px;
  font-size: 30px;
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
#rightmenu {
  float: right;
  margin-right: 70px;
  font-size: 30px;
  margin-top: 30px;
  position: relative;
  z-index: 10;
}
#container {
  width: 1000px;
  z-index: 100;
  position: relative;
  margin: 400px auto 0;
}
#left {
  float: left;
  width: 250px;
  height: 200px;
  position: relative;
}
#right {
  float: right;
  width: 250px;
  height: 200px;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    <div class="boxes-left">

      <div class="box1">
        <h3>Review #1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
      </div>

      <div class="box2">
        <h3>Review #2</h3>
        <p>Ayy lmao ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
      </div>

      <div class="box3">
        <h3>Review #3</h3>
        <p>Aeouoi sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
      </div>

    </div>
  </div>


  <div id="right">
    <div class="boxes-right">

      <div class="box1">
        <h3>Review #1</h3>
        <p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesqu Duis sit amet pretium sapien.</p>
      </div>

      <div class="box2">
        <h3>Review #2</h3>
        <p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
      </div>

      <div class="box3">
        <h3>Review #3</h3>
        <p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
      </div>

    </div>

  </div>


</div>

＆＃13;

演示：Fiddle

无法让我的脚本循环

1 个答案: