对此有点麻烦...... 摇晃效果示例
在 Firefox 中,如果我省略该行
$this.css({'margin-left':$this.position().left});
然后将框动画到左侧而不是中心。如果我保留那行代码来修复 firefox,那么 chrome 也会遇到同样的问题。
任何解决这个问题的技巧都会很棒。
提前致谢
解决方案(不是一个快乐的解决方案,但它可以跨浏览器“工作”——我说的是跨浏览器,得到了 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');
});
最简单的解决方案可能是引入一个额外的内部 div 来摇动。例如,如果您要摇动的 div(并且具有“margin 0 auto”)的 id 为“centered”,则不要摇动这个 div,而是添加一个内部 div“摇动”并摇动那个 div。
<div id="centered">
<div id="shake">
<div>the content</div>
</div>
</div>
$.browser
您可以在 jQuery中检测 Firefox 或 Chrome 。
然后,您可以决定是否应用该 CSS。
想我明白你在问什么,是这个吗?
请将您展示的答案与此处的答案保持一致。JS Fiddle 是用于演示的资源,而不是托管整个答案的地方。——大卫·托马斯20 分钟前
根据上面的评论,这是我改变的:
jQuery:
$this.css({'margin-left':$this.position().center});
CSS - 做了一些 tweeks 包含<div>
:
#box{ width: 20px; height: 20px; margin:auto auto;}
希望有帮助吗?