问题
I've been trying to get a function to trigger only after all of the element's .animate()
functions have been completed including the delay and easing.
I've tried a few different methods with no luck, any ideas?
$("#inner_work").on("mouseenter", ".activeBox", function(){
var thisBox = $(this).attr('id');
$("#inner_work [class^='workBox_']").each(function(){
if($(this).attr('id') != thisBox){
$(this).stop().delay(randomEasing(200,800)).animate({
opacity:0
}, randomEasing(200,700));
} else {
$(this).stop().animate({
opacity:1
}, 'fast');
}
});
});
How do I trigger an event AFTER all the animation has been completed?
randomEasing
is just this function to make it randomly staggered
function randomEasing(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
回答1:
You can use deferred objects and request a .promise() to register a callback which will be invoked only when all animations on every element within the collection have completed:
$("#inner_work [class^='workBox_']").promise().done(function() {
...
});
This can be chained with your existing code:
$("#inner_work [class^='workBox_']").each(function() {
// your existing animation code
}).promise().done(function() {
...
});
来源:https://stackoverflow.com/questions/14125980/trigger-an-event-after-all-of-the-animations-from-current-function-completed