jquery设置动画并使div居中

当div逐渐消失时，我想让它成为中心。请检查代码并告诉我如何更改以使其正确

下面是实现url 这是代码

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

---

你设置的左右方向都错了。$'“种植者”。宽度是启动动画时的当前宽度，而不是目标宽度。您应该从左向左设置：windowWidth/2-w/4，因为它的目标宽度等于w/2。然后，w/2是左边和右边距的左边，因此windowWidth/2-w/4是中间。和托普的故事一样

---

工作示例：

您设置的左和右错误。$'“种植者”。宽度是启动动画时的当前宽度，而不是目标宽度。您应该从左向左设置：windowWidth/2-w/4，因为它的目标宽度等于w/2。然后，w/2是左边和右边距的左边，因此windowWidth/2-w/4是中间。和托普的故事一样

工作样本：

我的解决方案使用jqueryui动画

HTML jQuery 我的解决方案使用jqueryui动画

HTML jQuery

---

首先-没有id为grower的元素，所以$'grower'。width和$'grower'。height总是返回0。首先-没有id为grower的元素，所以$'grower'。width和$'grower'。height总是返回0。请详细解释下一行。grower.show'scale'，{percent:100}，500，函数{flag=1；}。动画{'opacity'：'1'}，{duration:500，queue:false}；；我用显示功能缩放百分比。。。它是干什么的？首先u显示，然后设置动画。如果使用show可以看到div，那么动画在这里的作用是什么？事实上，这条线是如何工作的，我只是不明白…..请详细解释show和animate是如何一起工作的。实际上，谢谢。动画不是在。显示之后，但同时注意队列：false。其目的是结合重缩放和淡入效果。这可能有点不清楚，但如果我尝试使用。效果而不是。隐藏它的行为不同。谢谢你的回答。我需要有关于jQueryUI动画的扎实知识。需要这种语法的命令，比如.show'scale'，{percent:100}。。。因此，请指导我应该阅读哪一篇教程来熟悉上面的语法。我所知道的都是来自，这里我指的是堆栈溢出。你能详细解释一下下面这行吗。grower.show'scale'，{percent:100}，500，函数{flag=1；}。动画{'opacity'：'1'}，{duration:500，queue:false}；；我用显示功能缩放百分比。。。它是干什么的？首先u显示，然后设置动画。如果使用show可以看到div，那么动画在这里的作用是什么？事实上，这条线是如何工作的，我只是不明白…..请详细解释show和animate是如何一起工作的。实际上，谢谢。动画不是在。显示之后，但同时注意队列：false。其目的是结合重缩放和淡入效果。这可能有点不清楚，但如果我尝试使用。效果而不是。隐藏它的行为不同。谢谢你的回答。我需要有关于jQueryUI动画的扎实知识。需要这种语法的命令，比如.show'scale'，{percent:100}。。。因此，请指导我应该阅读哪个教程来熟悉上述语法。我所知道的都是来自，也就是这里，我指的是Stack Overflow.ur示例工作，但如果单击“单击此处”按钮，您可以从第二次单击中看到它不是中心。因此，请看一看，并做一些更改，使其始终显示在中心。您的示例工作，但如果单击“单击此处”按钮，则您可以从第二次单击中看到它不是中心。因此，请看一看，并进行更改，使其始终显示在中心。

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