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

Question

我在使用 jquery 中的 .animate 功能将 div 缩放到它自己的中心时遇到问题。我有一个 div(在单独的 css 文件中定义的宽度和高度 - 46px 和 50px，位置设置为绝对)。这个 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);
    });
}

fiddle :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/