0

我有一个徽标网格，5 个横，4 个向下。

当用户单击任何徽标时，该徽标将被推入网格并退出站点。在点击第 5 个徽标之前，一切都运行得非常顺利。你可以在这里试试：

徽标隐藏器

当您单击第 5 个时，有关如何纠正徽标中的跳跃的任何想法？

这是我的 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 非常简单。谢谢您的帮助。

4

2 回答 2

2

我建议将其设为无序列表，既因为它会使您想做的事情更容易，也出于语义目的。

然后，您可以<li>相对定位您的 s 和其中的图像绝对。这样动画图像不会破坏网格的布局。只需隐藏<li>最后而不是图像。

于 2012-04-13T21:18:07.993 回答
0

在我的 chrome 中一切正常，但在 IE 7 中，在你的第一个动画中根本不工作

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

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

于 2012-04-13T21:23:20.830 回答