jQuery动画步变换

Question

I am facing problem with jQuery animate now property. But it's always increment current value. i want it will start from 0 and will end at 20 every time in loop. Here is my code

 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

Your current code the plus(+) was the problem

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

Remove and lets try like this

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