Bind an event on animation

I have a couple of eleme开发者_Python百科nts that are being animated on a arrow click.

Now I want that if they are being animated, to call an event.

The thing is, they are all being animated in different ways, so I would have to

fire this event on each element separately.

Is there a way to do something like $('div:animated').live(...) or something

that would fire an event on the animated elements?

$("div").animate({
    "top":20
},1000,function(){
    callback();
});

function callback(){
    //stuff here
}

or

$("#layer1, #layerMask").animate({
    "top":10
},{
    queue:false,
    duration:1000, 
    easing:"easing method if required", 
    complete:function(){
    callbacks();
    }   
});

function callback(){
    //stuff here
}

best way! just use the call back every time you animate an element.

the only other ways i can think of are things like setInterval and check the element top value for change etc. but this would be messy and not advised.

Just take the hit and use callbacks. best practice.

Unless anyone else has any ideas.