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 を非表示にして 2 番目を表示できます。これを示すために簡単なjsFiddleを作成しました。

于 2012-04-02T08:12:07.400 に答える