$(function () { var speed = 150; var times = 4; var items = $('.container'); function mix() { var pos = [0,100,200] pos1 = pos.splice(pos.indexOf( pos[Math.floor(Math.random()*pos.length)] ), 1)[0] pos2 = pos.splice(pos.indexOf( pos[Math.floor(Math.random()*pos.length)] ), 1)[0] pos3 = pos.splice(pos.indexOf( pos[Math.floor(Math.random()*pos.length)] ), 1)[0] items.eq(0).animate({top: pos3}).animate({ top:0 ,left: pos1 }, speed); items.eq(1).animate({top: pos2}).animate({ top:0 ,left: pos2 }, speed); items.eq(2).animate({top: pos1}).animate({ top:0 ,left: pos3 }, speed, function(){ if(times>0) mix(); times--; }); }; $('.ball').animate({ left: $(items[Math.floor(Math.random()*items.length)]).addClass('choosen').position().left, top: 0 }, 2000, function(){ $(this).hide(); mix(); }); items.click(function(){ if($(this).hasClass('choosen')) alert('You won'); else alert('You lost'); }); });
<div class="container one"></div> <div class="container two"></div> <div class="container three"></div> <div class="ball"></div>
body { position: relative; margin:10px; } .container { cursor:pointer; } .ball, .container { height: 100px; width: 100px; background: green; float: left; border-radius: 5px; position: absolute; z-index:2; } .one { left:0 } .two { left:100px } .three { left:200px } .ball { border-radius: 100px; background: red; float: none; clear: both; z-index:-1; top: 200px; }