I'm just wondering what the safest/cleanest/fastest/right way is to
completely destroy an element after an animation tween or morph
finishes. I'm basically cloning an input element, running an effect
on the clone (pushing it rightwards while shrinking and fading it out,
and then want it to be destroyed once its no longer visible (i.e., the
end of the effect)). I know that chaining is the preferred way to
schedule these sorts of events, but for some reason when I try to set
it up, the animation is jerky and slow. Here's an example of what I'm
doing, with a snippet taken from inside the onchange event function
that I'm adding to all input elements in a form:
var clone = this.clone();
clone.setStyle('position', 'absolute');
clone.injectAfter(this);
clone.morph({
left: 500,
opacity: 0,
width:10,
height:5,
}).get('morph').chain(function(){clone.destroy();});
I can also simply use an anonymous function on a delay that destroys
the clone after a reasonable amount of time. This method works
perfectly... but it feels sort of cheap.
Would the absolute best way to do what I want to be to extend the
morph class so that it has an option to automatically destroy an
element on completion of the morph? I tried using the onComplete
function in the above code, but for some reason it destroys the
element before the animation finishes.
