用不透明度增長和縮小效果來顯示div

Question

我訪問了kendo UI網站，我看到窗口顯示和關閉效果。我喜歡。所以我試圖展示我的div具有相同的效果。所以這裏是我的代碼，我試圖顯示我的div像kendo UI窗口顯示&隱藏。我的代碼工作正常，但有一些閃爍，我也無法生成像劍道UI的效果。我的意思是不使用劍道UI而顯示我用下面的效果DIV

<div class="click">Click here</div> 
<div class="grower"></div> 

.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; 
} 
}); 

Answer 1

試試這個http://jsfiddle.net/Sj4eG/5/

你必須設置不透明度爲0，然後才能以動畫爲1