浮动元素和使用jQuery

我有一个徽标的网格，5横跨和4下。浮动元素和使用jQuery

当用户点击任何标志时，标志被推入网格并退出现场。一切都运行得非常顺利，直到点击第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是非常简单的。谢谢您的帮助。

来源

2012-04-13 Michael Rader

你使用什么浏览器？我正在测试铬18.0.1025.152米，它的工作原理。 – Jarry 2012-04-13 21:18:26

对我来说，它的工作原理是一样的，你用什么浏览器？ – riso 2012-04-13 21:19:38

它的作品，是的。问题是当你点击右上角的那个，所有的标志跳下来一秒钟。 – idrumgood 2012-04-13 21:20:16

我会建议做一个无序的列表，因为它会使你想做的事情变得更容易和语义上的目的。

然后，您可以相对定位您的<li>，并将它们中的图像绝对定位。这种方式动画图像不会中断网格的布局。只需在结尾处隐藏<li>而不仅仅是图像。

来源

2012-04-13 21:18:07 idrumgood

嗯，我会试试看看会发生什么。 – 2012-04-13 21:55:05

谢谢！我做了它，我拿出了浮动和停止动画。看起来好多了。 – 2012-04-13 22:26:27

在我的铬一切运作良好，但在IE 7不工作，你的第一个动画

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

删除最后一个“”背后marginBottom，一些浏览器可能会想到另一个参数。

来源

2012-04-13 21:23:20 riso

谢谢你。但这并不能解决我目前的问题。 – 2012-04-13 21:55:46

浮动元素和使用jQuery

回答

相关问题