jquery:如何改变div中心的大小

Question

当我使用 jQuery animate() 函数更改 div 的大小时，它总是从左上角开始。我怎样才能让它从中心而不是角落缩放。例如我的代码:

<div id="div1"></div>

<style>


#div1{
position: absolute;
width: 50px;
height: 50px;
background-color: red;
opacity: 0.4;
top: 40%;
left: 40%;
border-radius: 1000px;
margin: auto;
}
</style>

<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>

<script>
$(document).ready(function(){
$("#div1").mouseover(function(){
    $(this).animate(
    {width: 100, height: 100, opacity: 1},
    {duration: 500,
    easing: "easeOutBounce"}
    );
});
$("#div1").mouseout(function(){
    $(this).animate(
    {width: 50, height: 50, opacity: 0.4},
    {duration: 500,
    easing: "easeOutBounce"}
    );
});
});
</script>

这将从左上角开始改变，但我希望它从中心凝视。谢谢!

Answer 1

这是一个example使用@Schroedingers Cat 的建议。我将顶部和左侧位置更改为像素值而不是百分比。

JavaScript:

$("#div1").mouseover(function() {
    $(this).animate({
        width: 100,
        height: 100,
        top: 75,
        left: 75,
        opacity: 1
    }, {
        duration: 500,
        easing: "easeOutBounce"
    });
});
$("#div1").mouseout(function() {
    $(this).animate({
        width: 50,
        height: 50,
        top: 100,
        left: 100,
        opacity: 0.4
    }, {
        duration: 500,
        easing: "easeOutBounce"
    });
});

CSS:

#div1{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    opacity: 0.4;
    top: 100px;
    left: 100px;
    border-radius: 1000px;
    margin: auto;
}