Jump to content

Keyframe animation does not work on fade out zepto.js


TheBnl

Recommended Posts

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 by TheB
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...