Question

我在使用jquery中的.animate功能将div缩放到自己的中心时遇到问题。我有一个div（宽度和高度在一个单独的css文件中定义--46px和50px，position设置为绝对）。这个div位于另一个div（它的父级）中，一个52px * 52px大小的正方形。我想要实现的是将子div缩放到它自己的中心（它有一个背景图像），但到目前为止它只是朝着父方形div的左上角缩放。任何建议将不胜感激。

我现在有这个，

var PARENT_SQUARE_WIDTH = 52;
var PARENT_SQUARE_HEIGHT = 52;
var H = 56;
var W = 52;

function anim(childDiv) {
    $(childDiv).animate({
        height: H * 0.1 + "px",
        width: W * 0.1 + "px",
        left: "+=" + ((PARENT_SQUARE_WIDTH * 0.5) - (childDiv * 0.5)) + "px",
        top: "+=" + ((PARENT_SQUARE_HEIGHT * 0.5) - (childDiv * 0.5)) + "px"

    }, 600, "linear", function () {
        anim(childDiv);
    });
}

小提琴：https://jsfiddle.net/84x55e07/4/

Answer 1

您可以使用left:50%和top:%50并将margin-top设置为儿童自身的负半宽，对margin-left执行相同操作

<强>的javascript

var PARENT_SQUARE_WIDTH = 52;
var PARENT_SQUARE_HEIGHT = 52;
var H = 56;
var W = 52;
var childDiv = $("#childDiv");

function anim(childDiv) {
    $(childDiv).animate({
        height: H * 0.1 + "px",
        width: W * 0.1 + "px",
        marginLeft: -(W * 0.1 / 2) + "px",
        marginTop: -(H * 0.1 / 2)  + "px"

    }, 600, "linear");
}

anim(childDiv);

<强> CSS

#parentDiv{
    margin:50px auto;
    display:block;
    width:52px;
    height:52px;
    background: #99D100;
    position:relative;
}

#childDiv {
    position: absolute;
    background-image: url("http://exmoorpet.com/wp-content/uploads/2012/08/cat.png");
    width: 46px;
    height: 50px;
    top:50%;
    left:50%;
    margin-top: -25px;
    margin-left:-23px;
    background-size: 55%;
    background-position: center center;
    background-repeat: no-repeat;
}

https://jsfiddle.net/f0hn050a/

jquery将div缩放到其父div的中心

1 个答案: