JQuery.animate () doesn't work a second time, I run it

Question

I am making a carousel of several objects. It is assumed that it will rotate the carousel, so the next object is in focus when I press the next / previous buttons. The first time I press one of the buttons, it slowly enlivens the rotation, but with the following clicks, for some reason, it simply changes the object without animation. And it should be animated every time I click, but it only does it the first time after every page reloads.

Here is jsfiddle: https://jsfiddle.net/sxybreak/jouevx28/1/

Here is my code:

$(document).ready(function() {
    var angle;
    var i = 0;

    $("#previous").on('click', function() {

        i+=1;

        $("#carousel").animate({borderSpacing: 40}, {
            duration: 'slow', 
            step: function(now, fx) {

                $(this).css({
               'transform': 'rotateY(' + (i*now) + 'deg)',
               '-webkit-transform': 'rotateY(' + (i*now) + 'deg)',
               '-moz-transform': 'rotateY(' + (i*now) + 'deg)',
               '-ms-transform': 'rotateY(' + (i*now) + 'deg)' });
        }
     });
  });


  $("#next").click(function() {

    i-=1;

    $("#carousel").animate({borderSpacing: 40}, {
      duration: 'slow',
      step: function(now, fx) {

        $(this).css({
            'transform': 'rotateY(' + (i*now) + 'deg)',
            '-webkit-transform': 'rotateY(' + (i*now) + 'deg)',
            '-moz-transform': 'rotateY(' + (i*now) + 'deg)',
            '-ms-transform': 'rotateY(' + (i*now) + 'deg)' });
      }
    });
  });
});

Answer 1

, border-spacing. , 40, , .

Answer 2

, ? , borderSpacing 0. 40, .

borderSpacing 40. , , transform .

reset borderSpacing "+40" () "-40" () .

:

$("#previous").on('click', function () {

    i += 1;

    $("#carousel").animate({
        borderSpacing: "+=40"
    }, {
        duration: 'slow',
        step: function (now, fx) {
            $(this).css({
                    'transform': 'rotateY(' + (now) + 'deg)',
                    '-webkit-transform': 'rotateY(' + (now) + 'deg)',
                    '-moz-transform': 'rotateY(' + (now) + 'deg)',
                    '-ms-transform': 'rotateY(' + ( now) + 'deg)'
            });
        }
    });
});

JSFiddle : https://jsfiddle.net/jouevx28/3/

Answer 3

I did not try to start it.but one reason that the animat is not working a second time, because the animation queue is natural. just use .stop () after the selector, as in

$ (this) .stop ()

Follow this link to learn more http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Perhaps this will help other users go to this page, just like me.