做出流畅的效果。 jQuery动画功能。

时间:2012-01-18 11:30:37

标签: jquery

使用jQuery动画功能我正在展示&隐藏div与成长和收缩效果。我的代码运行正常。但是在显示&时出现闪烁隐藏div。效果不是很顺利。我怎样才能让它变得更加流畅。要改变什么?

我的代码: http://jsfiddle.net/Sj4eG/6/

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

0 个答案:

没有答案