jquery动画并使div居中

Question

当 div 淡出时，我想让它居中。请检查代码并告诉我要更改哪些内容才能使其正确。

这里是实现 url http://jsfiddle.net/Sj4eG/17/这是代码。

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;
    var w = 300;
    var h = 300;

    if(flag==0)
    {
        $('.grower').show()
        grower.css({left:windowWidth/2, top:windowHeight/2});
        grower.animate({width:w, height:h, left:left, top:top,opacity : 1},500);
        flag=1;
    }
    else if(flag==1)
    {
        grower.animate({width:h/2, height:w/2, left:(windowWidth/2 -
            $('#grower').width()), top:(windowHeight/2 -
            $('#grower').height())},function() {$('.grower').fadeOut("slow");flag=0;});
        flag=0;
    }
});

Answer 1

http://jsfiddle.net/Sj4eG/34/

我使用 jQuery UI 动画的解决方案。

HTML

<div class="click">Click here</div>
<div class="grower"></div>

CSS

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

jQuery

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;
    var w = 300;
    var h = 300;

    if (flag == 0) {

        grower.css({
            left: left, top: top, width: w, height: h, opacity: 0
        });
        grower
            .show('scale', {percent: 100}, 500, function(){ flag = 1; })
            .animate({'opacity':'1'} , { duration: 500, queue: false, easing: 'easeInCubic'});;
    }
    else if (flag == 1) {
        grower
            .hide('scale', {percent: 50}, 500, function(){ flag = 0; })
            .animate({'opacity':'0'} , { duration: 500, queue: false});
    }
});