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

Posted 2023-05-08

【中文标题】Jquery .animate() 在我第二次触发它时不起作用

【英文标题】：Jquery .animate() doesn't work second time i trigger it

【发布时间】：2015-12-13 06:24:07

【问题描述】：

我正在制作几个对象的轮播。它应该旋转轮播，因此当我单击下一个/上一个按钮时，下一个对象是焦点。我第一次单击其中一个按钮时，它会缓慢地为旋转设置动画，但是在下一次单击时，由于某种原因，它只是更改了没有动画的对象。每次我点击时它都应该动画，但它只会在每次页面重新加载后的第一次动画。

这是一个 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)' );
      
    );
  );
);

【参考方案1】：

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

【参考方案2】：

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

$(this).stop()

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

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

【参考方案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/

【讨论】：

确实动画不正确。就像现在一样，它从 now = 0 变为 40、80、120 等等，我希望它从当前角度变为 i*now 是正确的。我只是不知道该怎么做。

我解决了这个问题。检查我编辑的答案。我现在正在为你更新 JSFiddle

好的。您的代码有几个设计问题。首次使用borderSpacing。不会变成负数。所以我将其更改为使用z-index 作为动画的参考属性。然后对于旋转，因为我们有一个通过1 递增的参考属性，所以我直接使用了now。查看 JSFiddle 链接 jsfiddle.net/jouevx28/3 看看这是否是您想要的

这正是我想要的！谢谢你，你是最棒的:)