Question

这是我的代码，我正在展示我的div＆amp;用grow＆amp; amp;隐藏我的div收缩效果。我希望当div要缩小时，div会在它的大小为零之前淡出。根据我的代码，当div大小为0时，我的div是淡出的。我的意思是当高度和＆amp;宽度为零。

所以请仔细阅读我的代码并告诉我如何在大小变为零之前淡出我的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);

关于jquery动画和不透明度

1 个答案: