Question

我有一个滚动器，可使用上一个/下一个按钮设置动画。动画的持续时间是根据移动的距离计算的，因此持续时间是可变的。

$c.animate({ scrollLeft: scrollLeft },
    duration, 'easeInOutExpo', function () {
        if (showPrev === 0) $s.attr("data-prev", showPrev);
        if (showNext === 0) $s.attr("data-next", showNext);
});

动画制作完成后，我想刷新用户界面（按钮），您可以看到通过更新两个数据属性来完成。

到目前为止，我已经尝试了两种不同的选择：

1。在动画之前更新数据属性

我使用CSS过渡延迟来使更新稍后发生，但无法与动画的可变持续时间完全协调-有时可能会消失。

2。动画之后更新数据属性

我在动画之后直接附加了更新功能，该功能可以正常工作，但是动画完成后，在开始更新之前会有明显的延迟。

都不是完美的。

理想情况下，我想做的就是在滚动动画结束之前启动该功能-因此，如果滚动持续时间为1s，我想以duration - 0.2s（0.8s）更新属性。

考虑到我可以完全控制持续时间，这似乎完全有可能。

我不知道如何使用jQuery实现此功能-可能同时启动两个任务？

无论如何，我都不是jQuery专家，因此不胜感激。

Answer 1

请尝试使用此代码

$c.animate({ scrollLeft: scrollLeft },
duration, 'easeInOutExpo', function () {
    if (showPrev === 0) $s.attr("data-prev", showPrev);
    if (showNext === 0) $s.attr("data-next", showNext);

    time = setTimeout(function () {

    //keep your code here

   }, duration-0.2s);
});

duration-0.2s =>使其正确，我只是以示例为例。

在jQuery动画结束之前运行功能

1 个答案: