Question

当div越来越淡时，我想让它成为中心。请查看代码并告诉我要改变什么以使其正确。

这是实施网址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;
    }
});

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：2)

Answer 1

你设置左右错误。 $('#grower').width()是当前宽度（当您开始动画时），而不是目标宽度。您应该将left设置为left:(windowWidth/2 - w/4)，因为它的目标宽度等于w/2。然后w/2留给左右边距，因此(windowWidth/2 - w/4)是中间。与top相同的故事。

工作样本：http://jsfiddle.net/lolo/Sj4eG/21/

Answer 2

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

jquery动画并制作div中心

2 个答案:

HTML

CSS

的jQuery