Question

I am currently trying to have an image move around the screen in certain paths. When it finishes one, it hides itself, then moves to the start point again to wait for user input and start the next. I’m using the anim function in Zepto for both of these, however I am noticing that when animated while hidden, the program crashes. Can someone tell me how I can fix this, either through a different way of moving it or something I need to do with anim()?

Thanks for the help.

Answer 1

What do you mean by crashes? I am guessing you are using a callback when your animation completes to trigger the next step AND you are using either display:none or visibility:hidden to hide your element.

If this is the case, the problem you are facing is that the anim callback does not fire when no animation takes place. The callback is based on the webkitTransitionEnd function which only fires if a transition occurs. These transitions won’t actually occur for A) boolean properties like visibility and B) objects that are completely hidden and not being rendered.

The easiest way to overcome this would be to have your image never be removed from rendering, by disappearing it using opacity: 0 or changing its z-index to be below all other elements. Typically, what I do is have two states: {opacity:1, zIndex: 10000} and {opacity:0, zIndex: -1}. This way, when the object is completely faded out it won’t block other elements and it will fade smoothly. (zIndex from -1 to 1 is happens at very low opacity.)