Несколько экземпляров плагина поворота изображения, jQuery

Question

Я хотел бы, чтобы несколько изображений вращались, вращаются или вращаются, независимо от того, какой термин лучше всего описывает вращение 2D-изображения, из того же документа.

JQuery плагин, который делает это для одного изображения: http://code.google.com/p/jqueryrotate/wiki/Examples

Хотя пример страницы показывает много примеров вращающихся изображений, они загружаются из фреймов. Значение каждого вращающегося изображения является частью другого документа, показанного через iframe.

Я пытаюсь повернуть различные изображения на разных скоростях и под разными углами, и он не работает.

Например, для двух изображений я использовал код

var angle = 0; 

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

Спасибо

Answer 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"/>​ 

---

EDIT:

Вот еще одна рабочая демонстрация, основанная на изменениях t o ОП.

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);​ 

Answer 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); 
})(); 
​ 
​