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属性的设置。动画完成后，边框间距为40，因此没有动画效果。

Answer 2

我没有尝试过运行它。但是动画第二次没有工作的一个原因是因为动画的自然排队。只需在选择器后使用.stop（），如

$（本）.stop（）

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

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

Answer 3

您基本上使用步进功能来制作自定义动画，对吧？因此，在第一次转化中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/

Jquery .animate（）在第二次触发它时不起作用

3 个答案: