关于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);