在jQuery動畫結束之前運行函數

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）的duration - 0.2s更新屬性。

考慮到我可以完全控制持續時間，這似乎完全有可能。

我不知道如何使用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 =>使其正確，我只是以示例為例。