TheBnl Posted January 26, 2013 Share Posted January 26, 2013 (edited) I have a function witch triggers an series of animations, it uses CSS3 keyframe animations to render them. The weird problem i'm encountering is with my FadeOut animation, it doesn't happen. I have a animation called FadeIn that does the same (but in reverse) but doesn't have any problems running at all. The rotten apple: $"#id").animate("FadeOut", {duration:800, easing: 'ease-out'}).hide(); The working example: $("#id").animate("FadeIn", {duration:800, easing: 'ease-in'}).show(); The CSS3 animations: @-webkit-keyframes FadeOut { 0% { opacity:1;} 100% { opacity:0; }}@-webkit-keyframes FadeIn { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; }} I'm using Zepto.js as a jquery replacement, zepto uses css3 animations. At the end of the animation i'm hiding the content with .hide() this causes the element to change the display to none. display is not animatable so before the display goes to none i use opacity to create the fade out effect. I think it hade something to do with te display but i cant figure out what because the FadeIn doesn't have any problems at all. Look at the demo Thank you! Edited January 26, 2013 by TheB Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2013 Share Posted January 26, 2013 This is like a very similar post we had before, where we had set it from display:none; to display: block; and apply visibility: hidden; and then reset it back for fadeIn to work. $("#id").fadeOut(function() { $(this).css({'display': 'block', 'visibility': 'hidden'}); } ); $("#id").css({'display': 'none','visibility': 'visible'}).fadeIn(); Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now