时间戳

首页 > 解决方案 > 连续旋转

javascript - 连续旋转

问题描述

我有以下在点击时应用的代码：

$("#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 度的旋转，但它是从元素的默认位置开始执行此操作的，而不是从上一次旋转中离开该元素的位置。为什么会这样，我该如何解决它，以便第二个动画从第一个动画的最终位置“起飞”？

标签： javascriptjquery

解决方案

  1. 你应该保存旋转角度
  2. 你不应该通过 deg 找到 elem

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>

推荐阅读