2012-03-29 7 views
0

私はこのような何かを持っている:は、WebKitの移行を「隠す」(表示:なし)後のdiv

<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を非表示にするアニメーションを終了したときに問題があります1つ)彼の場所を取る。私はプロパティの表示を入れようとしました:アニメーションは動作しません。

ご協力いただきありがとうございます。

答えて

1

あなたのコードはすでにWebkit固有であるため、webkitTransitionEndイベントを使用してアニメーションの終了を知ることができます。そのイベントのハンドラでは、最初のdivを非表示にして2番目のdivを表示できます。私はこれを実証するために素早くjsFiddleを書きました。

関連する問題