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

发生这种情况是因为您正在为边框间距属性的设置设置动画。动画完成后，边框间距为 40，因此没有可设置的动画。

Answer 2

我没有尝试运行它。但是动画第二次无法运行的原因之一是动画的自然排队。 只需在选择器后使用 .stop()，如

$(this).stop()

访问此链接以了解更多信息 http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

可能会帮助其他用户访问此页面，就像我一样。

Answer 3

您基本上是在使用 step 函数来制作自定义动画，对吧？所以在第一个转换中borderSpacing 是0。这通过在每个步骤中调用您的自定义动画来动画到40。

但是，在下一次点击中，borderSpacing 仍然是40。所以没有什么可以做动画的，这就是为什么它只添加transform而不做任何动画。

一个简单的解决方案是将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/