为什么这个 jquery 动画没有像它应该的那样旋转？答案

【问题标题】：Why isn't this jquery animation rotating like it's supposed to?为什么这个 jquery 动画没有像它应该的那样旋转？
【发布时间】：2013-01-03 06:57:59
【问题描述】：

这个 .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 它对我有用......但是......我仍然无法让它工作页面上有很多项目（这是我真正追求的）......理想情况下......您点击的任何优惠券都会出现动画......目前动画仅适用于第一张优惠券......并且非常不稳定

再次感谢！

【问题讨论】：

fiddle
我收到一个参考错误：ReferenceError: clipIt2 is not defined。请注意，ID 必须是唯一的，在解决您的范围问题后，请考虑使用类而不是 ID。事实上，动画只会针对具有该特定 ID 的第一个元素执行。
使用了太多$("#ToBeAnimated") 和$("#paperTrail")。我建议您为此创建一个变量并在任何地方使用它。它会让它更快一点。
对不起...clipIt2 未定义是我用重复函数测试...我删除了它...仍然有问题...不过我现在会看课程！
哈哈哈哥们，我认为函数名称是clipIt而不是clipIt2，在js文件中这是做什么的：<?php echo $this->item->link; ?>

标签： javascript jquery animation rotation jquery-animate

【解决方案1】：

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

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

【讨论】：

Geeeze....感谢您指出这一点！...这似乎对我的实际现场站点有所帮助...这意味着 FF 和 Chrome 中的动画至少现在完成了。 ..但没有什么比小提琴的平滑度更好的了？！？？！有什么东西还在冲洗……啊……谢谢大家！
我发现这与页面上有多个项目有关...如果您查看只有一个结果的页面，它可以工作Single Result Page