Show div with grow & shrink effect with opacity
<p>i visit the kendo UI site and i saw there window showing and closing effect. i like it. so i tried to show my div having same effect. so here is my code by which i tried to show my div as like kendo UI window show &amp; hide. my code works fine but there is some flickering and i am also not being able to generate the effect like kendo UI. my intention is not to use kendo UI rather show my div with the following effect </p>

<pre><code>&lt;div class="click"&gt;Click here&lt;/div&gt;
&lt;div class="grower"&gt;&lt;/div&gt;

.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({width:300, height:300, left:left, top:top,opacity : 1},500);
flag=1;
}
else if(flag==1)
{
grower.animate({width:0, height:0, left:(windowWidth/2 - $('#grower').width()),  top:(windowHeight/2 - $('#grower').height()),opacity : 0},500);
flag=0;
}
});
</code></pre>
