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
Post a Comment