图像旋转插件的多个实例，jQuery答案

【问题标题】：Multiple instances of image rotate plugin, jQuery图像旋转插件的多个实例，jQuery
【发布时间】：2012-04-19 22:40:03
【问题描述】：

我希望从同一个文档中旋转、旋转或旋转多个图像，无论哪个术语最能描述 2D 图像旋转。

为一张图片执行此操作的 jquery 插件是：http://code.google.com/p/jqueryrotate/wiki/Examples

虽然示例页面显示了许多旋转图像的实例，但这些都是从 iframe 加载的。这意味着，每个旋转图像都是通过 iframe 显示的另一个文档的一部分。

我正在尝试以不同的速度和不同的角度旋转不同的图像，但它不起作用。

例如，对于两个图像，我使用了代码

var angle = 0;

    setInterval(function(){
      angle+=3;
     jQuery(".process-1").rotate(angle);
},50);
setInterval(function(){
      angle-=3;
     jQuery(".process-2").rotate(angle);
},30);

谢谢

【问题讨论】：

您将不得不更好地解释自己并展示您的代码。 The example page 在多张图片上运行良好。
请提供邮政编码。我们不知道您在哪里遇到问题。
查看我的答案的编辑，其中包含您应用了修复的实际代码。

标签： jquery jquery-animate rotation

【解决方案1】：

它似乎在多个图像上工作正常。你没有解释你想要什么，但这里是旋转三个图像的代码......

http://jsfiddle.net/RwEme/603/

var rotation = function (){
   $("#image, #image2, #image3").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
          return c*(t/d)+b;
      }
   });
}
rotation();

HTML：

<img src="https://www.google.com/images/srpr/logo3w.png" id="image"/>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image2"/>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image3"/>

编辑：

这是另一个基于 OP 编辑的工作演示。

http://jsfiddle.net/RwEme/604/

它不起作用，因为您试图将同一个变量 (angle) 用于两个不同的事物。

var angle = 0,
    angle2 = 0;

setInterval(function() {
      angle += 3;
     $("#image").rotate(angle);
},80);
setInterval(function() {
      angle2 -= 3;
     $("#image2").rotate(angle2);
},20);

【讨论】：

抱歉，有点麻烦...您的第二个解决方案有效。谢谢你
@IberoMedia，不客气。请记住，我最初是在您发布任何代码之前回答的。
您的解决方案运行良好。我有一个评论是，每个旋转图像都会向全局命名空间添加一个变量。为了防止这种污染，您可以将每个动画包装在一个函数中并调用它。它有点干净。有关示例，请参阅我的解决方案。
@koenp，关于“污染”，我的代码行数要少得多。在两个函数中声明 angle 两次不同的时间，或者只声明两个唯一变量之间并没有太大区别。
是的，你的更短，如果你喜欢短，你应该去。只是说 IF 您想阻止将内容添加到全局 JavaScript 命名空间中，您可以将它们包装在函数调用中，或者围绕您的代码进行一个大函数调用。全局命名空间污染被认为是不好的做法。

【解决方案2】：

它们确实适用于旋转动画。您必须确保将每个旋转包装在不同的函数中，以便angle 变量的范围仅限于该函数。否则，两个动画共享相同的变量，这将不起作用。这是一个包含其中两个的工作 jsfiddle：

http://jsfiddle.net/YKj5D/215/

我使用这段代码来启动动画

(function() {
  var angle = 0;
  setInterval(function(){
      angle+=3;
     $("#image3").rotate(angle);
  },50);
})();

(function() {
  var angle = 0;
  setInterval(function(){
      angle+=10;
     $("#image4").rotate(angle);
  },50);
})();

【讨论】：