0

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

Когда же я устанавливаю отрицательное значение(-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>

1
  • Уже третий день не могу понять где ошибка((( 29 янв 2019 в 17:30

1 ответ 1

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>

1
  • Ошибка была у меня под носом, а я и не заметил в силу своей глупости. Так как я начал изучение javascript / jquery совсем недавно. Благодарю вас уважаемый Вадим Лешкевич за столь информативный и очень полезный ответ. Нынче это редкость, когда люди так информативно и грамотно помогают. 31 янв 2019 в 1:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.