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'
        }