jquery抖动效果和margin-auto答案

【问题标题】：jquery shake effect and margin-autojquery抖动效果和margin-auto
【发布时间】：2011-02-23 11:17:33
【问题描述】：

如果我省略该行，则在 Firefox 中

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

然后框会被动画到左侧而不是中心。如果我保留那行代码来修复 firefox，那么 chrome 也会有同样的问题。

任何解决这个问题的技巧都会很棒。

提前致谢

【问题讨论】：

在两个浏览器中查看 var val = $this.position().left; 返回的值或结果，假设它们不同（我在 iPhone 上并且远离办公桌），使用 if 来测试这些值，并酌情包括或省略导致问题的行。

标签： jquery jquery-ui shake

【解决方案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');
});

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

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

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

【讨论】：

我可以，但 $.browser 已被弃用，所以我真的想要一个与浏览器无关的解决方案。

【解决方案4】：

我知道你在问什么，是这个吗？

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

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

根据上面的评论，这是我改变的：

jQuery:

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

CSS - 对包含 <div> 的内容做了一些 tweeks：

#box{ width: 20px; height: 20px; margin:auto auto;}

希望有帮助吗？

【讨论】：

请将您展示的答案与此处的答案保持一致。 JS Fiddle 是用于演示的资源，而不是托管整个答案的地方。
David Thomas：完成，有点懒惰。刚刚发现 jsfiddle，所以我正在使用它加载。