I'm struggling with fading out an image after applying a tilt class to it. The transition doesn't seem to work properly and the image just disappears without the expected animation.
The class I'm trying to add simply tilts the image 90 degrees.
You can see the issue in action on my jsfiddle:http://jsfiddle.net/sqHxq/4/
Here is the code snippet:
HTML
<div id="logo" style="z-index:10">
<img src="http://s17.postimg.org/lb2un1g0r/image.png" alt ="">
</div>
<div id="other" style="z-index:0">
<img src="http://cdn1.iconfinder.com/data/icons/humano2/32x32/actions/old-edit-redo.png" alt="">
</div>
CSS
.tilt {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#logo {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
}
#other {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
}
Javascript
$(document).ready(function () {
$('#logo').hide().delay(250).fadeIn(1000);
$('#other').hide().delay(750).fadeIn(1000);
$("#logo").click(function() {
$('#logo').addClass("tilt").fadeOut(2000);
});
});