Question

请你看一下 This Demo ，让我知道为什么当我想使用jquery调整.outer div的大小时会发生这种奇怪的行为，你可以看到在演示和关注图像后，.outer div在开始调整大小之前就会卡住一次。

enter image description here

我必须在.inner div中使用绝对定位div .outer作为：

<div class="outer">
    <div class="inner" id="circle"></div>
</div>
<button id="plus" type="button" class="btn">Resize</button>

$(function () {
    $("#plus").on("click", function () {
        $(".outer").animate({
            width: '+=20px',
            height: '+=20px',
            borderRadius: '+=10px'
        }, {
            duration: 500,
            queue: false
        });
        $(".outer").animate({
            left: '-=1%',
            top: '-=1%'
        }, {
            duration: 500,
            queue: false
        });
    });
});

这是CSS规则：

#circle {
    width: 100%;
    height: 100%;
    background: #fc2e5a;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    border-radius: 120px;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}
.inner {
    position: absolute;
}
.outer {
    position:relative;
    width: 235px;
    height: 220px;
    left:50%;
    top:50%;
}

你能告诉我如何解决这个问题吗？感谢

Answer 1

删除以下三行css：

left:50%;
top:50%;
margin:-100px 0 0 -150px;

演示：http://jsfiddle.net/rLpc90sk/2/

Answer 2

您对height和width div使用相同的.outer和.inner。

#circle {
    width: 100%;
    height: 100%;
}

因此，您不需要在left上使用top，margin和#circle来正确对齐该div。

只需从#circle -

中删除这些属性即可

#circle {
    width: 100%;
    height: 100%;
    background: #fc2e5a;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    border-radius: 120px;
/*  left:50%;
    top:50%;
    margin:-100px 0 0 -150px; */
}

<强> DEMO

Answer 3

还有一件事需要从函数中删除，以便在点击之后圆圈被压缩或收缩之前修复行为。删除左边：＆＃39; - = 1％＆＃39;和top：＆＃39; - = 1％＆＃39;，来自函数中第二个animate条目的属性。除了上面的第一个建议和瞧，圆圈扩展而没有缩小的左下动画。

$(".outer").animate({      

        }, {

使用jQuery调整绝对定位Div的问题

3 个答案: