JQuery анимировать пошаговое преобразование

Question

У меня проблема со свойством jQuery animate now.Но это всегда увеличивает текущее значение.Я хочу, чтобы он начинался с 0 и заканчивался в 20 каждый раз в цикле.Вот мой код

var container = $('#top_slides');

    var items = container.children('.top_slide_sp');
    
    var lengths = items.length;
    var index = 0;
    var transition_speed = 5000;
    var transSP = function(){
        items.eq(index).animate({
            'opacity': '100',
             now: '+=20'
        }, {
            step: function (now, fx) {
                $(this).css('transform', "translate3d(" + now + "px, 0, 0)");
            },
            duration: 6000,
            easing: 'linear',
            queue: false
        }, 'linear');
    };
    
    var show = function(){
        items.eq(index).fadeOut(800, function(){
            index += 1;
            if (index === lengths) {
                index = 0;
            }
               transSP();

            items.eq(index).fadeIn(800, function(){
                items.removeClass('active');
                items.eq(index).addClass('active');
                
                setTimeout(show, transition_speed);
            });
        });
    };
    
    // Show first item
    items.eq(index).addClass('active').fadeIn(400, function () {
      
           transSP();
        
        setTimeout(show, transition_speed);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top_slides">

<div class="top_slide_sp">1</div>
<div class="top_slide_sp">2</div>
<div class="top_slide_sp">3</div>

</div>

Answer 1

Ваш текущий код плюс (+) был проблемой

{
            'opacity': '100',
             now: '+=20' <--------
}

Удалите и давайте попробуем вот так

{
            'opacity': '100',
             now: '=20'
        }