關於jquery動畫和不透明

Question

這裏是我的代碼，我通過它顯示我的div &隱藏我的div與增長&縮小效果。我希望當div要收縮時，div會在大小爲零之前淡出。 根據我的代碼，當div大小爲0時，我的div是淡出的。我的意思是當高度爲&寬度爲零時。

所以請仔細閱讀我的代碼並告訴我如何在尺寸變爲零之前淡出我的div。 假設我的div大小是300px。當高度&寬度減少到150px與動畫功能的幫助下，然後我希望我的div將完全消失。所以告訴我在我的代碼中要更改什麼。

接下來，我看到如果我點擊「點擊這裏」按鈕，然後發生一些閃爍，並且我看到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({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; 
} 
}); 

Answer 1

的第一個問題，使用一個回調函數：

$('#my-id').animate({width: 0, height: 0}, 1000, function() { 
    $(this).fadeOut(); 
}); 

但這等於的jQuery .hide()功能，所以也許你可以使用它。而爲了切換此功能使用.toggle()

---

第二個問題可以通過動畫功能之前添加.stop()來解決：

$('#my-id').stop().animate({width: 0, height: 0}, 1000);