 <p>Add CSS</p> <pre><code> .test{ position:absolute;} .wrapper{ position:relative} </code></pre> <p>HTML</p> <pre><code>&lt;div class="wrapper"&gt; &lt;div id="1" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="2" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="3" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="4" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="5" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="6" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="7" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="8" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="9" class="full-circle"&gt;&lt;/div&gt;&amp;#8213; &lt;div id="10" class="full-circle"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>add new wrapper div</p> <p>SCRIPT</p> <pre><code>var gCurrentDot = 1; $('.full-circle').click(function() { var pos = $('#'+ gCurrentDot +'').position(); var posLeft = pos.left; var posTop = pos.top; $('body').append('&lt;div class="full-circle-green test"&gt;&lt;/div&gt;'); $('.test').css('left',posLeft).css('top',posTop).animate({height: "30px", width:"30px"}, {duration: 200, complete:function() { $(this).animate({height: "10px", width:"10px"}, {duration: 500}); }}); setTimeout(function () { $('.test').remove(); $('#'+ gCurrentDot +'').addClass('full-circle-green'); gCurrentDot++; }, 500); }); </code></pre>