jquery 摇动效果和 margin-auto

Question

有一点烦恼这个... Firefox 中的抖动效果示例

如果我省略该行

$this.css({'margin-left':$this.position().left});

，则该框将向左动画的在中心。如果我保留这行代码来修复 Firefox，那么 chrome 也会出现同样的问题。

任何解决这个问题的建议都会很棒。

提前致谢

Answer 1

解决方案（不是一个令人愉快的解决方案，但它可以跨浏览器工作 - 我说的是跨浏览器，有 ie9 并且我的工作机器无法运行虚拟 PC！！！）；

var options = {
              direction: 'left',
              distance: 10,
              times: 2
              };
var left = $this.position().left > parseInt($this.css('margin-left')) ? $this.position().left : $this.css('margin-left');
$this
    .css({'margin-left': left})
    .effect('shake' , options , 75 , function(){
        $this.removeAttr('style');
});

Answer 2

最简单的解决方案可能是引入一个额外的内部 div 来抖动。例如，如果您想要摇动的 div（并且具有“margin 0 auto”）的 id 为“centered”，则不要摇动此 div，而是添加一个内部 div“摇动”并摇动该 div。

<div id="centered">
    <div id="shake">
        <div>the content</div>
    </div>
</div>

http://jsfiddle.net/yAjHa/

Answer 3

您可以在 jQuery 中使用 $.browser 检测 Firefox 或 Chrome。

然后您可以决定是否应用该 CSS。

Answer 4

我想我得到了你所问的，是这个吗？

http://jsfiddle.net/mwVkm/3/

请将您演示的答案与此处的答案保持一致。 JS Fiddle 是一个用于演示的资源，而不是托管整个答案的地方。 – 大卫·托马斯 20 分钟前

根据上面的评论，这是我更改的内容：

jQuery:

$this .css({'margin-left':$this.position().center});

CSS - 对包含的

进行了一些调整：

#box { 宽度：20px;高度：20px； margin:auto auto;}

希望有帮助吗？