在动画完成之前,JQuery Animate回调触发

Question

我一直在努力寻找类似的问题,但我没有找到完全相同的问题.

我正在和砌体一起工作,我试图将带有过滤器的面板从一侧滑入砌体ul.然后,当动画完成时,我希望Masonry标记面板并重新计算其余项目的分布.回调函数似乎是完美的选择,但我无法使其工作......在动画完全完成之前调用回调,因此某些项目在面板下重新定位.

这是代码:

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");
    }

});

过滤器只是一个对象,万一你想知道.所以回调应该只被触发一次.我尝试了带有相同结果的promise()选项.我已经尝试了setTimeout()选项并且它可以正常工作,但是看起来像废话使用超时来避免在它被暴露之前被触发的完整功能!

问题的有趣部分是代码的第二部分按预期工作("其他"部分).

对不起我的英文并提前致谢!

Answer 1

问题是我的CSS.我的过滤器面板上有这个规则:

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

所以我很确定CSS动画是错误的JQuery,在JQuery动画完全完成之前触发"完整"事件.一旦我删除了我的CSS代码的那部分,一切都按预期工作.

谢谢你的帮助,再次抱歉我浪费了你的时间.