每隔x秒切换多个div位置jquery

Question

我需要帮助，使用Javascript或Jquery每3秒切换一次div（#box）位置。提前谢谢。

这里是HTML代码：

＆＃13;

＆＃13;

<div class="container">
   <div class="box">
     <div class="molecule img">
     </div>
     <p>molecule 1 description</p>
   </div>
  <div class="box">
     <div class="molecule img">
     </div>
     <p>molecule 2 description</p>
   </div>
  <div class="box">
     <div class="molecule img">
     </div>
     <p>molecule 3 description</p>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用 setInterval() ，以下是切换为div并更改其文字颜色的示例。

var $div = $('.box'),
  index = 0,
  length = $div.length;
setInterval(function() {
  $div.css('color', 'black').eq(index).css('color', 'red');
  index = ++index % length;
}, 3000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="molecule img">
    </div>
    <p>molecule 1 description</p>
  </div>
  <div class="box">
    <div class="molecule img">
    </div>
    <p>molecule 2 description</p>
  </div>
  <div class="box">
    <div class="molecule img">
    </div>
    <p>molecule 3 description</p>
  </div>
</div>

<小时/> 更新：将第一个div移至容器

的末尾

setInterval(function() {
  $('.box:first').appendTo($('.box').parent());
}, 3000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="molecule img">
    </div>
    <p>molecule 1 description</p>
  </div>
  <div class="box">
    <div class="molecule img">
    </div>
    <p>molecule 2 description</p>
  </div>
  <div class="box">
    <div class="molecule img">
    </div>
    <p>molecule 3 description</p>
  </div>
</div>