0

我有这样的事情：

 <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（黄色）来代替他。我试图将属性 display:none 但动画不起作用。

任何帮助都非常感谢。

4

1 回答 1

1

由于您的代码已经特定于 webkit，也许您可​​以使用 webkitTransitionEnd 事件来了解动画何时结束。在该事件的处理程序中，您可以隐藏第一个 div 并显示第二个。我写了一个快速的jsFiddle来演示这一点。

于 2012-04-02T08:12:07.400 回答