I'm currently working with code that looks something like this:
<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>
The challenge I'm facing is once the first div finishes its animation, I want it to hide and have the div below it (the yellow one) take its place. I attempted to add the property display:none, but the animation won't function as expected.
Any assistance would be greatly appreciated.