Последовательные вращения

У меня есть следующий код, который я применяю при нажатии:

$("#search").click(function()
{
  if (searchForth)
  {
    animateRotate(45,"#search");
    searchForth = false;
  }
  else
  {
    animateRotate(-45,"#search");
    searchForth = true;
  }
});

И вызываемая функция:

function animateRotate(d,element)
{
  var elem = $(element);
  $({deg: 0}).animate({deg: d},{
      duration: 600,
      step: function(now)
      {
        elem.css({
            transform: "rotate(" + now + "deg)"
        });
      }
  });
}

Когда функция вызывается, элемент поворачивается на 45 градусов от позиции по умолчанию, что я и хочу. Однако, когда я снова нажимаю на элемент, функция применяет поворот на -45 градусов, но делает это из положения элемента по умолчанию, а не из положения, в котором элемент остался после предыдущего поворота. Почему это так и как это исправить, чтобы вторая анимация «отрывалась» от конечной позиции первой анимации?

$({deg: 0}) так чего вы ожидаете?

— 24.10.2018 14:49

javascript jquery

24.10.2018 14:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы должны сохранить угол поворота
Вы не должны найти elem by deg

var searchForth = false;
var angle=0;
$("#search").click(function()
{
  if (searchForth)
  {
    angle += 45;
    animateRotate(angle,"#search");
    searchForth = false;
  }
  else
  {
    angle -= 45;
    animateRotate(angle,"#search");
    searchForth = true;
  }
});

function animateRotate(d,element)
{
  var elem = $(element);
  $(elem).animate({deg: d},{
      duration: 600,
      step: function(now)
      {
        elem.css({
            transform: "rotate(" + now + "deg)"
        });
      }
  });
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "search">Search</button>

24.10.2018 15:00

Сначала вам нужно получить текущую повернутую позицию, а затем добавить / удалить от нее 45 градусов в соответствии со значением searchForth.

Посмотрите на это для получения дополнительной информации: Получить элемент -moz-transform: повернуть значение в jQuery

var searchForth=false;
$("#rotate").click(function()
{
  if (searchForth)
  {
    animateRotate(45,this);
    searchForth = false;
  }
  else
  {
    animateRotate(-45,this);
    searchForth = true;
  }
});
function animateRotate(d,element)
{
var startDeg = getRotationDegrees($(element));
  var elem = $(element);
  $(elem).animate({deg: (startDeg + d)},{
      duration: 600,
      step: function(now)
      {
        elem.css({
            transform: "rotate(" + now + "deg)"
        });
      }
  });
}

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; }
    return (angle < 0) ? angle + 360 : angle;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "rotate">Rotate me!</div>

24.10.2018 15:02

Как насчет использования перехода и преобразования CSS3?

$(function() {
  var deg = 45;
  var srh = $('#search').on('click', function(e) {
    srh.css('transform', 'rotate(' + (deg) + 'deg)');
    deg = -(deg);
  });
});

#search {
  transition: transform 1s ease;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "search">Search</button>

25.10.2018 07:18

Другие вопросы по теме

Как умножить два значения в объекте

Как установить флажок для каждой выбранной строки с помощью Datatables?

Как создать гистограмму со сплошной заливкой?

Измените функцию JavaScript, чтобы она применялась только к указанным div, а не ко всем div

JQuery каждый результат функции, как это сделать?

Отправка команды на воспроизведение дорожки через кнопку

Динамическое изменение значения ползунка диапазона

Проблемы с разбиением на страницы jQuery

Внутри каждого условия jQuery

Создание абсолютного div в той же верхней позиции с другим div с помощью jQuery

Последовательные вращения

Ответы 3

Другие вопросы по теме

Похожие вопросы