在Chrome-Safari上增加和减少div的一面

Question

我使用此代码来增加和减小div的大小：

$("#div1").hover(function() {
                var $this = $(this);
                $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
                    'height': "390",
                    'width' : "840",
                    'marginTop' : "-12",
                    'marginLeft' : "-12",


                });
            },function() {
                   var $this = $(this);
                   $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
                    'height': "350",
                    'width' : "800",
                    'marginTop' : "0",
                    'marginLeft' : "0"
                });
            });



            $("#div2").hover(function() {
                var $this = $(this);
                 $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
                    'height': "270",
                    'width' : "290",
                    'marginTop' : "-12",
                    'marginLeft' : "-12",


                });
            },function() {
                   var $this = $(this);
                   $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
                    'height': "250",
                    'width' : "250",
                    'marginTop' : "0",
                    'marginLeft' : "0"
                });
            }); 

为什么Chrome和Safari无法正常运行？

在Firefox中正常工作但在Chrome-Safari中增加div的大小时div会移动并且div会移动到另一个位置。

没有控制台错误。

示例：http://jsfiddle.net/d3athR0n/S8Nqm/3/

感谢。

编辑：您的帮助的其他问题：https://stackoverflow.com/questions/17460335/slideshow-glitching-on-chrome-safari-with-jquery