javascript - jquery delay/animate start bugging しばらくしてオーバーラップ

Question

3 つの画像の単純なスライダーを実行する jQuery コードに取り掛かる必要がありました。このスライダーは、画像を 1 つずつ表示および非表示にし、プロセスを無期限に繰り返す必要があります。

コードは次のとおりです。

$(document).ready(function () {
    function start_slider() {

        $('#slider_img_1').animate({
            top: '-=495'
        }, 1000).delay(4000).animate({
            top: '+=495'
        }, 1000);
        $('#slider_img_2').delay(6000).animate({
            top: '-=495'
        }, 1000).delay(4000).animate({
            top: '+=495'
        }, 1000);
        $('#slider_img_3').delay(12000).animate({
            top: '-=495'
        }, 1000).delay(4000).animate({
            top: '+=495'
        }, 1000);
        setTimeout(function () {
            start_slider();
        }, 18000);
    }
    start_slider();
});

これを理解している限り、最初の画像を1秒間アニメーション化し、4秒間保持し、1秒間アニメーション化します。他の 2 についても同じです。数学は合いますか? 合計で 18 秒間続き、その後再び開始します。

問題: おそらく 3 ～ 5 分間は完全に機能しますが、2 つの画像が一度重なって表示されます。10 分後、開始がより頻繁に重複し、時間の経過とともにゆっくりと増加します。

何が問題なのですか？(注: firefox と chrome の同じバグ)