我有一个 Logo 网格，横向 5 个，向下 4 个。
当用户点击任何 Logo 时，该 Logo 将被插入网格并退出网站。在单击第 5 个 Logo 之前，一切都运行得非常顺利。您可以在这里尝试:
关于如何在单击第 5 个时更正 Logo 跳转的任何想法？
这是我的 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 非常简单。感谢您的帮助。
最佳答案
我建议将其设为无序列表，这既是因为它会让您想做的事情更容易，也是出于语义目的。
然后，您可以定位您的 <li> s 是相对的，里面的图像是绝对的。这样动画图像就不会破坏网格的布局。只需隐藏 <li>在最后，而不仅仅是图像。
关于javascript - float 元素和使用 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10148403/