Javascript jQuery"；“反弹”；对居中对齐块元素的影响在Firefox和IE8中将其向左对齐

我的目标是在一个div中水平居中显示多个图像，而div也在包装器中水平居中。我可以这样做，但当我在图像上调用jQuery的“反弹”效果时，它们会向左对齐

我已经摆弄了好几年了，不能让它们在弹跳时保持居中

查看

---

我正在Win7上使用最新的Firefox。

我想我已经解决了这个问题。不是以我喜欢的方式（使用CSS），也许有点过分，但它仍然有效。问题确实是左边距，在处理要居中的可变内容时，您确实不想设置它。另外：我注意到Safari（Windows版）也有同样的问题

看到它在这里工作：

因此，我所做的是编写一个自定义的BounceMe（）函数，将要反弹的元素传递给该函数。它的作用是：

检查我们是否在Firefox或Safari中，如果不是：常规反弹（跳过以下步骤）

获取元素的当前（实际）左偏移量

将该偏移作为左边距应用于图元

弹跳

将左边距重置为自动

此外，它在元素上设置了一个“反弹”标志，以防止函数反弹已经在反弹的对象

重要所有元素都应

position: relative; 

否则将禁用偏移计算

jQuery：

var userAgent = navigator.userAgent.toLowerCase();
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());//to prevent Chrome from being detected as safari  

function BounceMe($this) {
    if($.browser.mozilla || $.browser.safari && !$.browser.chrome){
        if (!$this.data('bouncing')) {
            $this.each(function(){ //run on each img
                $pos = $(this).position(); // get position of image
                $(this).css({marginLeft: $pos.left}); //'hard' set the margin left
            });

            $this.data('bouncing', true).effect("bounce", function(){
                $this.css({marginLeft: 'auto'}) //reset the margin left after animation
                    .data('bouncing', false);
            });
        } else {
            //images are still animating, do nothing
        }
    } else {
        //no Firefox or Safari? No problem, do a regular bounce.
        $this.stop().effect("bounce");
    }
}

$(document).ready(function() {

    BounceMe($("img")); //bounce on pageload

    $("#bounce").click(function() {
        BounceMe($("img")); //bounce on click on link
    });
});

您可以将函数重写为.extend（），这样它就可以像常规Bounce（）一样链接起来。

图像向左“跳跃”的原因是Bounce添加了两个

div

元素，这些元素具有设置

边距：0

的内联样式

因此，一个相当简单的解决方法是在您自己的CSS中覆盖此内容：

#thin > div {
    margin: 0 auto !important;   
}

注：我通常反对使用

！重要信息

但由于您使用它来覆盖内联样式，我认为这是可以接受的

---

工作示例：

Chrome 21中没有回购。你用的是什么浏览器？IE 9中没有回购协议，但可以确认IE 8中的行为。我可以在Firefox中看到有问题的效果，但在Chrome或IE（全部在Win7上）中看不到。这对我来说也很好，但我也在使用Chrome 21。Chrome和IE9中看起来不错，但在Firefox中，它们在弹跳时会离开，然后弹到中间，至少对meSee来说这篇帖子：羞愧地垂着头。。。这比我讨厌的东西要短得多，而且一旦你“看到它”，这是一个显而易见的解决办法。不错！令人惊叹的。这表明需要注意jQuery对标记的实际作用。非常感谢。这里有很多非常有用的技术。谢谢你花了这么多时间！：）