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

Answer 2

如果您希望保留css中的百分比，可以使用jQuery position()函数获取顶部和左侧起始坐标，以及width()和height()，并使用这些作为动画的基础值。

您还可以从mouseOut功能中使用的css中获取初始设置。

jsfiddle example

jquery：如何从中心改变div的大小

2 个答案: