javascript - 为什么这个 jquery 动画没有像预期的那样旋转？

Question

此 .js 在 fiddle 中完美运行

function animationLoop() {
    $("#ToBeAnimated").css({
        top: ($("#paperTrail").offset().top - parseInt($("#ToBeAnimated").height()) / 2),
        left: ($("#paperTrail").offset().left - parseInt($("#ToBeAnimated").width()) / 2)
    }).rotate(270);
    $("#ToBeAnimated").animate({
        top: $("#paperTrail").offset().top + $("#paperTrail").height() - $("#ToBeAnimated").height() / 2
      }, 1000, function() {
        $(this).animate({
            rotate: "180deg"
        }, function() {
            $("#ToBeAnimated").animate({
                left: $("#paperTrail").offset().left + $("#paperTrail").width() - $("#ToBeAnimated").width() / 2
            }, 1000, function() {
                $(this).animate({
                    rotate: "90deg"
                }, function() {
                    $("#ToBeAnimated").animate({
                        top: $("#paperTrail").offset().top - $("#ToBeAnimated").height() / 2
                    }, 1000, function() {
                        $(this).animate({
                            rotate: "0deg"
                        }, function() {
                            $("#ToBeAnimated").animate({
                                left: $("#ToBeAnimated").width() / 2
                            }, 1000, function() {
                                setTimeout(animationLoop, 1000);
                            });
                        });
                    });
                });

            });
        });
    });
}
animationLoop();​

但在实际站点上，剪刀旋转不起作用或以某种方式损坏...我已经检查过...猜测并检查过...研究了可能的冲突...但我卡住了!也许我遗漏了一些明显的东西？

感谢一百万的帮助!...要在实时站点上观看动画，只需单击“剪辑!!!”第一张优惠券底部的按钮!

extreme coupon network

更新:这与页面上有多个动画实例有关...当我查看页面时 with one result它对我有用......但是......我仍然无法让它与页面上的许多项目一起使用(这是我真正想要的)......理想情况下......无论你点击哪个优惠券都会有动画出现在它上面......目前动画只适用于第一张优惠券......而且非常摇晃

再次感谢!

Answer 1

您正在测试的 fiddle 使用的是 1.8.2 版的 jQuery。但是，在您的网页上，您使用的是 1.7.2 版。如果您将 fiddle 中的 jQuery 版本更改为 1.7.2，您会得到与页面上完全相同的错误行为(在 FF 中动画不稳定，在 IE 或 Chrome 中没有旋转)。

解决方案:更新您在项目中使用的 jQuery 版本!