Animating a div disappearance, how to smooth that?

Question

I've been trying to animate a Dashboard Widget's div disappearance, but it just brutally goes "poof" (as in, disappears as expected, only instantly).

function removeElement(elementId)
{
duration = 9000;    // The length of the animation
interval = 13;  // How often the animation should change
start = 1.0;    // The starting value
finish = 0.0;   // The finishing value
handler = function(animation, current, start, finish) {
    // Called every interval; provides a current value between start and finish
    document.getElementById(elementId).style.opacity = current;
    };
    new AppleAnimator(duration, interval, start, finish, handler).start();
interval = 1;
start= "visible";
finish = "hidden";
duration = 9001;
 handler = function(animation, current, start, finish) {
    document.getElementById(elementId).style.visibility="hidden";
    };
    new AppleAnimator(duration, interval, start, finish, handler).start();

}

I expected this to "disappear" the div a millisecond after its opacity reaches zero, but for a not so obvious reason (to me), it just disappears immediately. If I comment out the second animation code, the div fades out (but it's still active, which I don't want).

All solutions I've yet seen rely on using JQuery and wait for the event at the end of the animation, is there another way to do that, other than JQuery?

Answer 1

I found it: AppleAnimator possesses animator.oncomplete: A handler called when the timer is complete.

In my case:

var anim =  new AppleAnimator(duration, interval, start, finish, handler);
anim.oncomplete= function(){ 
            document.getElementById(elementId).style.visibility="hidden";
                            };
anim.start();

The Apple documentation actually calls "Callback" the animation code itself, and "handler" the callback, which makes it a bit hard to realize at first.

Thanks frenchie though, the "YourCallbackFunction" made me realize I was missing something related to callbacks :D

Answer 2

If you are looking for a pure javascript solution it probably needs a good understanding of how javascript event work and basically about javascript language. As reference you should check this question on CodeReview

But as I think the best solution for you and not to rely on jQuery is to checkout CSS3 animations. Even if they are not supported by all browsers you could use Modernizer to fill polyfills for animations.

My favorite CSS3 Animation library is Animate.css. It's pretty neat and gives you a variety of demos in the page.

You'll first have to choose an animation and add it to your css stylesheets. Then have another custom class that contain everything about the animation.

.disappear{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
}

Then you could use javascript events to toggle in classes to your Elements. Below is how you add a class to an element.

var animationObject = document.getElementById("poof");
animationObject.className = animationObject.className + " disappear";

If you need more help regarding javascript of how this should be done check out this answer.

Hope this helps...