如何使div在本节中循环

Question

I'm working on a Roulette site, but i don't have any idea how to make the divs loop around. I need the divs to loop around when they get out of the section border.

 $("#right").click(function() { $("#one").css("left", "300px"); $("#two").css("left", "300px"); $("#three").css("left", "300px"); $("#four").css("left", "300px"); $("#five").css("left", "300px"); $("#six").css("left", "300px"); }); $("#left").click(function() { $("#one").css("left", "0px"); }); 

 section { width: 80%; height: 50px; border: 5px solid gray; margin: auto; padding: 7px; z-index: 1; transition: left 2s ease; overflow: hidden; } div#one { width: 15%; height: 50px; background: black; float: left; z-index: -1; left: 0px; position: relative; transition: left 2s ease; loop: true; } div#six { width: 15%; height: 50px; margin-left: 5px; background: red; float: left; z-index: -1; left: 0px; position: relative; transition: left 2s ease; loop: true; } div#five { width: 15%; height: 50px; background: black; float: left; margin-left: 5px; z-index: -1; left: 0px; position: relative; transition: left 2s ease; } div#two { width: 15%; height: 50px; margin-left: 5px; background: red; float: left; z-index: -1; left: 0px; position: relative; transition: left 2s ease; } div#three { width: 15%; height: 50px; margin-left: 5px; background: black; float: left; z-index: -1; left: 0px; position: relative; transition: left 2s ease; } div#four { width: 15%; height: 50px; margin-left: 5px; background: red; float: left; z-index: -1; left: 0px; position: relative; transition: left 2s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> <div id="five"></div> <div id="six"></div> </section> <button id="right"> left: 100px; </button> 

so when i click on the button, it should move and then once they go out of the section border, the divs should loop around to the left and show again on the left.

Thanks in advance!

Answer 1

You don't have to animate all the elements, you can only animate the first one that will push the other, then you need to use overflow in order to be able to put the last element at the start.

So you may try something like this (that can be improved of course) :

 $("#right").click(function() { $('section').prepend($('section div').last().css('margin-left','-30%')); $('section >div').eq(1).css('margin-left', '0%'); }); $("#left").click(function() { $("#one").css("left", "0px"); }); 

 section { width: 80%; height: 50px; border: 5px solid gray; margin: auto; padding: 7px; z-index: 1; transition: left 2s ease; overflow: hidden; display: flex; } section>div { flex: 0 0 25%; margin: 0 5px; position: relative; color: #fff; text-align: center; transition: 1s ease; } #one, #three, #five { background: red; } #two, #four, #six { background: black; } section>div:first-child { margin-left: -30%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> <div id="four">4</div> <div id="five">5</div> <div id="six">6</div> </section> <button id="right"> left: 100px; </button> 

Answer 2

Just add a class with keyframe animation to your jquery code, and set the pixels and time you want:

 $("#right").click(function() { $("div").addClass("animate") }) 

 section { width: 80%; height: 50px; border: 5px solid gray; margin: auto; padding: 7px; z-index: 1; transition: left 2s ease; overflow: hidden; } div#one { width: 15%; height: 50px; background: black; float: left; z-index: -1; left: 0px; position: relative; } div#six { width: 15%; height: 50px; margin-left: 5px; background: red; float: left; z-index: -1; left: 0px; position: relative; } div#five { width: 15%; height: 50px; background: black; float: left; margin-left: 5px; z-index: -1; left: 0px; position: relative; } div#two { width: 15%; height: 50px; margin-left: 5px; background: red; float: left; z-index: -1; left: 0px; position: relative; } div#three { width: 15%; height: 50px; margin-left: 5px; background: black; float: left; z-index: -1; left: 0px; position: relative; } div#four { width: 15%; height: 50px; margin-left: 5px; background: red; float: left; z-index: -1; left: 0px; position: relative; } .animate{ animation: roulette 7s linear infinite; } @keyframes roulette { from {left: -550px;} to {left: 550px;} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> <div id="five"></div> <div id="six"></div> </section> <button id="right"> left: 100px; </button>