用grow& amp;显示div不透明度收缩效果

时间:2012-01-18 07:23:16

标签: jquery

我访问了剑道UI网站,我看到窗口显示和关闭效果。我喜欢。所以我试图表明我的div具有相同的效果。所以这里是我的代码,我试图将我的div显示为kendo UI window show&隐藏。我的代码工作正常,但有一些闪烁,我也无法生成像剑道UI的效果。我的意图是不使用kendo 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;
}
});

1 个答案:

答案 0 :(得分:0)

试试这个http://jsfiddle.net/Sj4eG/5/

您必须先将不透明度设置为0,然后才能将其设置为1