javascript - Jquery .animate() 在我第二次触发它时不起作用

Question

我正在制作一个由多个对象组成的旋转木马。它应该旋转旋转木马，所以当我单击下一个/上一个按钮时，下一个对象处于焦点。我第一次单击其中一个按钮时，它会缓慢地为旋转设置动画，但由于某种原因，下次单击时它只会更改没有动画的对象。每次我点击时它都应该动画化，但它只在每次页面重新加载后第一次执行。

这是一个 jsfiddle:https://jsfiddle.net/sxybreak/jouevx28/1/

这是我的代码:

$(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 属性的设置设置动画。动画完成后，border-spacing 为 40，因此无需设置动画。