JQuery Animate callback firing before animation is complete

I’ve been trying to look for some similar issue but I haven’t found the exact same one.

I’m working with Masonry and I’m trying to slide a panel with filters from one side into the Masonry ul. Then, when the animation is complete, I want Masonry to stamp the panel and recalculate distribution of the rest of items. Callback function seems to be the perfect choice, but I can’t make it work … the callback is called before the animation is fully completed so some items are repositioned just under the panel.

This is the code:

filterButton.off('click').on('click', function (e) {
    e.preventDefault();
    if (!filters.hasClass("open")) {
        filters.animate({ right: 0 }, 300, function () {
            masonryZone.masonry('stamp', filters);
            masonryZone.masonry('layout');
        });
        filters.addClass("open");
    } else {
        filters.animate({ right: -395 }, 300, function () {
            masonryZone.masonry('unstamp', filters);
            masonryZone.masonry('layout');
        });
        filters.removeClass("open");
    }

});

filters is just one object, in case you are wondering. So callback should be fired just once.
I’ve tried the promise() option with the same result.
I’ve tried setTimeout() option and it works, but it looks like nonsense to use a timeout to avoid complete function of being fired before it’s suposed to!

And the funny part of the issue is that the second part of the code works as expected (the “else” part).

Sorry about my english and thanks in advance!


Download jquery.animate.callback.firing.before.animation.is.complete.zip
Direct Link


Download


Download jquery.animate.callback.firing.before.animation.is.complete.zip
Mediafire


Download


Download jquery.animate.callback.firing.before.animation.is.complete.zip
Google


Download

Both comments and pings are currently closed.

Comments are closed.