Плавный поворот элемента в Jquery

148

10 сентября 2019, 11:30

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

Когда же я устанавливаю отрицательное значение(-6 градусов) поворота картинки. То анимация не плавная. Она моментально возвращается в исходное положение. Я уже всю голову сломал(((

Какая именно ошибка в этом скрипте?

$.fn.rotate = function(value, duration) { 
  this.stop().animate({ 
    borderSpacing: value 
  }, { 
    step: function(now, fx) { 
      $(this).css('transform', 'rotate(' + now + 'deg)'); 
    }, 
    duration: duration 
  }); 
} 
 
 
$('.image-1').hover( 
  function() { 
    $(this).rotate(-6, 300); 
  }, 
  function() { 
    $(this).rotate(0, 300); 
  } 
);

body { 
  background: #333; 
} 
 
.image-1 { 
  width: 250px; 
  height: 300px; 
  padding: 6%; 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
  <meta charset="utf-8" /> 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
 
</head> 
 
 
 
<body> 
 
  <img class="image-1" src="https://i.ibb.co/v3x7cBH/image3.jpg" alt="" /> 
 
 
</body> 
 
</html>

Answer 1

Проблема этой функции заключается в том, что для плавной анимации rotate тут используется любое ненужное css свойство, т.к. анимировать transform напрямую нельзя, то есть мы анимируем ненужное св-во и на каждом шаге подставляем его значение в transform в ф-ции step. НО, дело в том, что в этой ф-ции в качестве ненужного св-ва используется border-spacing, а он не может быть отрицательным, соответственно, когда вы установили rotate отрицательным, то по окончании анимацииborder-spacing станет равным 0, а не -6 и при возврате уже анимируется от 0 к 0, то есть уже на втором шаге rotate становится равным 0.

То есть просто вместо border-spacing нужно использовать св-во, которое поддерживает отрицательное значение, а можно вообще даже несуществующее css св-во, в примере ниже я использую несуществующее св-во rotate и всё отлично работает

$.fn.rotate = function(value, duration) { 
  this.animate({ 
    rotate: value 
  }, { 
    step: function(now, fx) { 
      $(this).css('transform', 'rotate(' + now + 'deg)'); 
    }, 
    duration: duration 
  }); 
} 
 
 
$('.image-1').hover( 
  function() { 
    $(this).rotate(-6, 300); 
  }, 
  function() { 
    $(this).rotate(0, 300); 
  } 
);

body { 
  background: #333; 
} 
 
.image-1 { 
  width: 250px; 
  height: 300px; 
  padding: 6%; 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
  <meta charset="utf-8" /> 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
 
</head> 
 
 
 
<body> 
 
  <img class="image-1" src="https://i.ibb.co/v3x7cBH/image3.jpg" alt="" /> 
 
 
</body> 
 
</html>