jQuery: как мне оживить поворот div?

Question

Я могу повернуть div с css и jquery .rotate, но я не знаю, как его оживить.

Answer 1

Использовать WebkitTransform/-moz-transform: rotate(Xdeg). Это не будет работать в IE, но решение Matt's zachstronaut не работает в IE.

Если вы хотите поддержать IE тоже, вы должны смотреть в использовании canvas, как я считаю, Raphael does.

Вот простой фрагмент jQuery, который вращает элементы в объекте jQuery. Вращение может быть запущен и остановлен:

$(function() { 
 
    var $elie = $("img"), degree = 0, timer; 
 
    rotate(); 
 
    function rotate() { 
 
     
 
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});      
 
     timer = setTimeout(function() { 
 
      ++degree; rotate(); 
 
     },5); 
 
    } 
 
    
 
    $("input").toggle(function() { 
 
     clearTimeout(timer); 
 
    }, function() { 
 
     rotate(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<input type="button" value=" Toggle Spin " /> 
 
<br/><br/><br/><br/> 
 
<img src="http://i.imgur.com/ABktns.jpg" />

Answer 2

Если вы разрабатываете для устройства IOS или просто WebKit, вы можете сделать это без JS вообще:

CSS:

@-webkit-keyframes spin { 
from { 
    -webkit-transform: rotate(0deg); 
} 
to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

.wheel { 
    width:40px; 
    height:40px; 
    background:url(wheel.png); 
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-duration: 3s; 
} 

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

.wheel { 
    width:40px; 
    height:40px; 
    background:url(wheel.png); 
} 

.wheel:hover { 
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-duration: 3s; 
} 

Answer 3

на основе Питер Ajtai ответ, вот небольшой JQuery плагин, который может помочь другим. Я не тестировал Opera и IE9, но должен работать и с этими браузерами.

$.fn.rotate = function(until, step, initial, elt) { 
    var _until = (!until)?360:until; 
    var _step = (!step)?1:step; 
    var _initial = (!initial)?0:initial; 
    var _elt = (!elt)?$(this):elt; 

    var deg = _initial + _step; 

    var browser_prefixes = ['-webkit', '-moz', '-o', '-ms']; 
    for (var i=0, l=browser_prefixes.length; i<l; i++) { 
     var pfx = browser_prefixes[i]; 
     _elt.css(pfx+'-transform', 'rotate('+deg+'deg)'); 
    } 

    if (deg < _until) { 
     setTimeout(function() { 
      $(this).rotate(_until, _step, deg, _elt); //recursive call 
     }, 5); 
    } 
}; 

$('.my-elt').rotate() 

Answer 4

Если вы хотите просто вариант JQuery, это будет работать:

$(el).stop().animate(
    {rotation: 360}, 
    { 
    duration: 500, 
    step: function(now, fx) { 
     $(this).css({"transform": "rotate("+now+"deg)"}); 
    } 
    } 
); 

Это работает с JQuery 1.8, который ухаживает CSS автоматически префиксов. jQuery не анимация вращения, поэтому я помещаю transform:rotate() в пользовательскую функцию step. Это может только работу, начиная с 0.

Demo: http://jsfiddle.net/forresto/ShUgD/

IE9 и Safari Mobile поддержки 4 CSS преобразования, но не CSS переходы, так что я пришел с этой простой прокладкой, с помощью тестирования функции Modernizr:

if (Modernizr.csstransitions) { 
    $(el).css({ 
    "transition": "all 500ms ease-in-out" 
    }); 
} 

$(el).click(function(){ 
    var rotateTo = 360; 
    if (Modernizr.csstransitions) { 
    $(el).css({"transform": "rotate("+rotateTo+"deg)"}); 
    } else { 
    $(el).stop().animate(
     {rotation: rotateTo}, 
     { 
     duration: 500, 
     step: function(now, fx) { 
      $(this).css({"transform": "rotate("+now+"deg)"}); 
     } 
     } 
    ); 
    } 
}); 

Приведенные выше будут использовать переходы CSS, если они доступны.

Answer 5

Я использую

$.fn.rotate = function(degrees, step, current) { 
 
    var self = $(this); 
 
    current = current || 0; 
 
    step = step || 5; 
 
    current += step; 
 
    self.css({ 
 
     '-webkit-transform' : 'rotate(' + current + 'deg)', 
 
     '-moz-transform' : 'rotate(' + current + 'deg)', 
 
     '-ms-transform' : 'rotate(' + current + 'deg)', 
 
     'transform' : 'rotate(' + current + 'deg)' 
 
    }); 
 
    if (current != degrees) { 
 
     setTimeout(function() { 
 
      self.rotate(degrees, step, current); 
 
     }, 5); 
 
    } 
 
}; 
 

 
$(".r90").click(function() { $("span").rotate(90) }); 
 
$(".r0").click(function() { $("span").rotate(0, -5, 90) });

span { display: inline-block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<span>potato</span> 
 

 
<button class="r90">90 degrees</button> 
 
<button class="r0">0 degrees</button>

Answer 6

Это работает для меня:

function animateRotate (object,fromDeg,toDeg,duration){ 
    var dummy = $('<span style="margin-left:'+fromDeg+'px;">') 
    $(dummy).animate({ 
     "margin-left":toDeg+"px" 
    },{ 
     duration:duration, 
     step: function(now,fx){ 
      $(object).css('transform','rotate(' + now + 'deg)'); 
     } 
    }); 
}; 

Answer 7

мне нужно, чтобы повернуть объект, но есть функции обратного вызова. Вдохновленный ответом Джона Керна, я создал это.

function animateRotate (object,fromDeg,toDeg,duration,callback){ 
     var dummy = $('<span style="margin-left:'+fromDeg+'px;">') 
     $(dummy).animate({ 
      "margin-left":toDeg+"px" 
     }, 
     { 
      duration:duration, 
      step: function(now,fx){ 
       $(object).css('transform','rotate(' + now + 'deg)'); 
       if(now == toDeg){ 
        if(typeof callback == "function"){ 
         callback(); 
        } 
       } 
      } 
     } 
    )}; 

Выполнение этого действия вы можете просто вызвать поворот на объекте так ...(в моем случае я делаю это на значке треугольника раскрытия, который по умолчанию повернут на 270 градусов, и я поворачиваю его на 90 градусов до 360 градусов в 1000 миллисекунд. Последний аргумент - это обратный вызов после того, как анимация закончил.

animateRotate($(".disclosure_icon"),270,360,1000,function(){ 
       alert('finished rotate'); 
      }); 

Answer 8

в настоящее время вы все еще не может одушевленные вращения с JQuery, но вы можете с CSS3 анимации, а затем просто добавлять и удалять класс с JQuery, чтобы анимация происходит.

JSFiddle demo

---

HTML

<img src="http://puu.sh/csDxF/2246d616d8.png" width="30" height="30"/> 

CSS3

img { 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
transform: rotate(-90deg); 
transition-duration:0.4s; 
} 

.rotate { 
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
-ms-transform: rotate(0deg); 
transform: rotate(0deg); 
transition-duration:0.4s; 
} 

JQuery

$(document).ready(function() { 
    $("img").mouseenter(function() { 
     $(this).addClass("rotate"); 
    }); 
    $("img").mouseleave(function() { 
     $(this).removeClass("rotate"); 
    }); 
});