Question

我一直在努力寻找类似的问题，但我找不到完全相同的问题。

我正在与Masonry合作，我正试图将带有过滤器的面板从一侧滑入Masonry 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代码部分，一切都按预期工作。

感谢您的帮助，再次抱歉我浪费了你的时间。

Answer 2

您需要使用complete。

complete:  function() { //do something on animation finishes
 }

<强> See Complete in Animate

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

2 个答案: