Jump to content

Keyframe animation does not work on fade out zepto.js

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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...