I utilized jQuery to create an animation effect:
UPDATE: Please note that this effect is optimized for Chrome browsers!
The animation works correctly, however, the green SPAN element moves out of the red DIV only after the animation ends. I want the green SPAN to be positioned over the red DIV from the start of the animation. I attempted adjusting the z-index and position styles in CSS but didn't achieve the desired outcome.
HTML:
<div class="ext_div">
<div class="int_div"><span>A</span></div>
</div>
CSS:
.ext_div {
-webkit-transform: rotate(-50deg);
}
div.ext_div div {
background-color: red;
position: relative;
margin-top: -400px;
padding-left: 80px;
width: 200px;
height: 250px;
font-size: 350px;
}
div.ext_div div span {
background-color: green;
width: 100px;
float: left;
-webkit-transform: skewY(50deg);
-moz-transform: skewY(50deg);
-o-transform: skewY(50deg);
-ms-transform: skewY(50deg);
transform: skewY(50deg);
}
jQuery Code:
$(document).ready(function() {
$(".int_div").queue(function () {
$(this).animate({width: "150", height: "125", right: "+=200", "font-size": "150px" }, 1200)
.queue(function () {
$(this).addClass("myclass");}).dequeue();
});
return false;
});
Any suggestions on how I can resolve this issue? Thank you in advance!