HTML
<div id="shapeblue" class="bar"></div> <div id="shapepink" class="bar"></div>
JQuery
$(function() { var wwidth = $(window).width(); var bluewidth = $("#shapeblue").width(); $("#shapeblue").css("left", (wwidth/2) - bluewidth); var bluepos = $("#shapeblue").position(); var movex = $("#shapeblue").width() + 4; $("#shapepink").css("left", bluepos.left + movex); var playAnimate; function moveleft(el) { $(el).animate({ left: '+='+movex }, 800, function() { $(el).css("z-index", "-100"); }); } function moveright(el) { $(el).animate({ left: '-='+movex }, 800, function() { $(el).css("z-index", "100"); }); } function playAnimation() { moveleft("#shapeblue"); moveright("#shapeblue"); moveright("#shapepink"); moveleft("#shapepink"); } $("#playbtn").click(function() { if ($(this).text() == "Start") { playAnimate = setInterval(playAnimation, 800); $(this).text("Stop"); } else { clearInterval(playAnimate); $(this).text("Start"); } return false; }); });
CSS
.bar { width: 250px; height: 250px; -webkit-border-radius: 7.5em; -moz-border-radius: 7.5em; border-radius: 7.5em; margin-right: 2px; position: absolute; } #shapeblue { background: #0063dc; z-index: 1; } #shapepink { background: #ff0084; z-index: 0; }" />