Javascript 浮动元素和使用jQuery

我有一个网格的标志，5跨和4向下

当用户单击任何徽标时，徽标将被推入网格并从站点中退出。在点击第五个徽标之前，一切都非常顺利。您可以在这里尝试：

当你点击第五个图标时，有没有关于如何纠正图标跳转的想法

以下是我的jQuery：

    $(document).ready(function() {

$('.imageShowing').click(function() {

        if ($(':animated').length) {
        return false;
                    }
  $(this).animate({
    zIndex: '1',
    height: '100',
    width: '140',
    marginTop: '14px',
    marginLeft: '20px',
    marginRight: '20px',
    marginBottom: '14px',
  }, 100, function() {


    $(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo })

    $(this).animate({
    zIndex: '1',
    top: '480',
    opacity: '0'
  }, 1000, function() {  
  $(this).hide("fast");  
    // Animation complete.
  });
  });
});

}); //end document.ready

我的CSS：

#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;}
#grid {width: 935px; height: 531px; margin: 0 auto; background: url(images/grid.png) no-repeat center; padding:39px 4px 39px 11px; position: relative; z-index: 5;}
#logoWrapper {position: absolute; top: 38px; left: 36px }
#logoWrapper img { float: left; padding: 0 7px 6px 0; margin:0; position: relative; z-index: 6;}

#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}

---

HTML非常简单。谢谢你的帮助。

我建议你把它列成一个无序的列表，因为它会让你想做的事情变得更容易，而且出于语义目的

---

然后，您可以相对定位您的

s，并绝对定位其中的图像。这样，设置图像动画不会破坏网格的布局。只需隐藏结尾处的

，而不仅仅是图像。

在我的chrome中，一切都很好，但在IE 7中，在你的第一个动画中根本不起作用

$(this).animate({
    zIndex: '1',
    height: '100',
    width: '140',
    marginTop: '14px',
    marginLeft: '20px',
    marginRight: '20px',
    marginBottom: '14px',
  } 

---

删除marginBottom后面的最后一个“，”，某些浏览器可能需要另一个参数。

您使用的浏览器是什么？我正在Chrome18.0.1025.152 m上测试这个，它可以工作。对我来说，它对所有人都可以工作，你使用的是什么浏览器？它可以工作，是的。问题是，当你点击右上角的图标时，所有的徽标都会在一瞬间跳下。是的@idrumgood，这正是问题所在。点击任意一行的最后一个标志，你就会跳起来。嗯，我试试看会发生什么。谢谢！我这样做了，我拿出了浮动和动画的停止。看起来好多了。