javascript - jQuery动画 anchor

Question

我正在尝试使用JQuery放大图像，效果很好（动画本身），但锚点位于左上方。如何确定锚点的中心？我已经尝试使用left:50%; transform: translateX(-50%);。代码如下：

HTML：

    <div id="main-links">
        <a style="cursor:pointer"><img id="img-1" style="margin-left: 0;" src="img/icons/forums.png" /></a>
        <a style="cursor:pointer"><img id="img-2" src="img/icons/servers.png" /></a>
        <a style="cursor:pointer"><img id="img-3" src="img/icons/staff.png" /></a>
        <a style="cursor:pointer"><img id="img-4" src="img/icons/donate.png" /></a>
    </div>

CSS：

#main-links {
    position: absolute;
    width: 873px;
    height: 205px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -90px;
}

#main-links img {
    width: 0;
    height: 0x;
    margin-left: 20px;
}

JavaScript / JQuery：

$(document).ready(function() {
    $('#img-1').delay(700).animate({ height: 200, width: 200 }, 500)
    $('#img-2').delay(1200).animate({ height: 200, width: 200 }, 500)
    $('#img-3').delay(1700).animate({ height: 200, width: 200 }, 500)
    $('#img-4').delay(2200).animate({ height: 200, width: 200 }, 500)
})

Answer 1

如果要RWD ...

样品：
How to scroll to anchor point in responsive website?