来自对象中心的jquery动画

我正在尝试创建一个类似于本页底部的产品查看器http://www.logitech.com/en-gb/ 。 你可以看到产品从中心而不是左上角动画，我认为这是Jquery的默认设置。 所以我正在做的是尝试设置宽度和高度的动画，然后尝试偏移，使其看起来像是从中心动画。

我的代码如下所示：

 body { background: black; } .box { background: #fff url('pic.jpg') no-repeat 0 0; width: 200px; height: 200px; margin: 10px 4%; float: left; }   $(document).ready(function() { $(".box").hover(function() { $(".box").not(this).fadeTo(500, 0.5); $(this).animate({ width: 300, height: 300, left: -100, top: -100 }, 500); }, function() { $(this).animate({ width: 200, height: 200, left: 100, top: 100 }, 500); $(".box").fadeTo(500, 1); }); });  

我似乎无法像我想的那样工作。 任何人都可以帮助这个或建议一个更好的技术？ 非常感谢

Answer 1

在玩完之后我设法得到了我想要的效果。 这是到目前为止的代码：