我有这样的东西：
<style>
#submenu {
background-color: #eee;
height:200px;
width:400px;
opacity: 1;
-webkit-transition: all 1s ease-in-out;
}
.doSomething {
background-color: #fc3;
-webkit-transform: rotate(360deg);
visibility:collapse;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="submenu">`enter code here`
<div style="background-color:black;width:50;height:50"></div>
</div>
<div style="background-color:yellow;height:250"></div>
<script type="text/javascript">
$(function(){
$('#submenu').addClass('doSomething');
});
</script>
</body>
问题是，当第一个div完成动画时，我想隐藏他和下面的div（黄色的）来代替他的位置。我试着把属性显示出来：只有动画才行。
非常感谢您的帮助。
由于您的代码已经是特定于webkit的，也许您可以使用webkitTransitionEnd事件来知道动画何时结束。在该事件的处理程序中，您可以隐藏第一个div并显示第二个div。我写了一个快速的jsFiddle来演示这一点。