Есть скрипт, который при фокусе мышки поворачивает картинку и возвращает в исходное положение. Этот скрипт работает корректно лишь, когда значение градусов положительное.
Когда же я устанавливаю отрицательное значение(-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>