javascript - Switch multiple div position jquery every x seconds -


i need switch many div (#box) positions every 3 seconds using javascript or jquery. thank in advance.

here html code:

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

you can use setinterval(), following example switches div , change it's text color.

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>


update : moving first div end of container

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>


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -