JQuery Animate callback firing before animation is complete

Question

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!

Answer 1

Problem was my CSS. I had this rules on my filters panel:

transition-duration: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;

So I'm quite sure CSS animation was missguiding JQuery, triggering the "complete" event before JQuery animation was fully completed. Once I removed that part of my CSS code, everything was working as expected.

Thanks for your help and sorry again about the time I made you waste on this.