Make a smooth effect. jQuery animate function.
<p>Using jQuery animate function I am showing &amp; hiding div with grow and shrink effect. My code works fine. But there is flicker when showing &amp; hiding div. The effect is not very smooth. How can I make it more smooth. What to change?</p>

<p>My code:
<a href="http://jsfiddle.net/Sj4eG/6/" rel="nofollow">http://jsfiddle.net/Sj4eG/6/</a>.</p>

<pre><code>.click {background:#ccc; border:1px solid black; padding:10px; display:inline-block}
.grower {width:0; height:0; background:red; position:absolute; top:150px;  left:150px;opacity: 0}

 var grower = $('.grower');
 var flag=0;

$('.click').click(function(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left = windowWidth/2 - 150;
var top = windowHeight/2 - 150;

if(flag==0)
{
grower.css({left:windowWidth/2, top:windowHeight/2});
grower.animate({opacity : 1,width:300, height:200, left:left, top:top},'slow');
flag=1;
}
else if(flag==1)
{
grower.animate({opacity : 0,width:0, height:0, left:(windowWidth/2 -   $('#grower').width()), top:(windowHeight/2 - $('#grower').height())},'slow');
flag=0;
}
});
</code></pre>
