RU

Вращение блока при наведении

Задача:

  • при наведении курсора на определнный блок, этот блок должен вращаться
  • при покидании курсора этого блока, блок должен "замереть"
  • при повторном наведении курсора, блок должен продолжить вращение с момента его остановки, а не начать вращаться сначала

Решение:

Сначала рассмотри код:


$(document).ready(function () {
var $ = jQuery;
// функциая, которая вычисляет угол, на который повернут объект
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform")	||
obj.css("-moz-transform")			||
obj.css("-ms-transform")			||
obj.css("-o-transform")				||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
}
else {
var angle = 0;
}
if(angle < 0) angle +=360;
return angle;
}
var timer;
// указываем нужный нам блок, который будет вращаться при наведении курсора
$(".demo1").hover(function() {
var angle = getRotationDegrees( $(".demo1") );
timer = setInterval(function() {
angle -= 2; // указываем, на какой угол вращать объект, в градусах
$(".demo1").css({
'transform': 'rotate(' + angle + 'deg)'
});
}, 50); // указываем время, в милисекундах
},
function() {
timer && clearInterval(timer);
});
});

Демо:

demo
Скачать

Немного подробнее о коде.

Функция "getRotationDegrees" вычисляет на какой угол вращён объект в данный момент через свойство CSS "transform".

Далее мы задаём как следует себя вести объекту при наведении на него:

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

      Вот и всё.