Keyframe animation does not work on fade out zepto.js

[TheBnl 0]

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

[dsonesuk 921]

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();