JS mouseenter -> 加速度值增加； mouseleave -> 减速值减小

Posted 2023-02-22

【中文标题】JS mouseenter -> 加速度值增加； mouseleave -> 减速值减小

【英文标题】：JS mouseenter -> acceleration value increases; mouseleave -> deceleration value decreases

【发布时间】：2019-11-28 19:38:28

【问题描述】：

我正在尝试实现鼠标悬停效果。 当用户悬停元素时，它开始缓慢旋转，随着时间的推移速度会增加。当用户离开元素时，旋转会减少并最终停止。

我的方法是设置一个循环，将给定值乘以 1。 这行得通。

现在，当用户离开时，我必须以某种方式获取该值并将其除以某个数字。那是行不通的:-(

这是我的代码，我使用 jQuery

https://codepen.io/hhqh/pen/gOOVQPV?editors=1011

var deg = 1;
var img;

var keepGoing = true;
var keepStopping = true;

function myLoop(img) 
  console.log(img);
  deg *= 1.1;
  console.log(deg);
  img.css('transform', 'rotate(' + deg + 'deg)');

  if(keepGoing) 
    setTimeout(myLoop, 30, img);
  


function myStop(img) 

  console.log(img);
  deg /= 1.1;
  console.log(deg);
  img.css('transform', 'rotate(' + deg + 'deg)');

  if(keepStopping) 
    setTimeout(myStop, 30, img);
  




$('#spinner').on('mouseenter', function()
  var img = $(this).find('img');
  startLoop(img);
).on('mouseleave', function()
  var img = $(this).find('img');
  stopLoop(img);
);

function startLoop(img) 
  keepGoing = true;
  keepStopping = false;
  myLoop(img);


function stopLoop(img) 
  keepGoing = false;
  keepStopping = true;
  myStop(img);

如您所见，它只是跳回。我想慢慢减少值，但因为它旋转并且只是将数字相加，减少实际上是向后旋转它。 也许我必须得到当前的旋转，并做一个新的微积分，它是如何增加一个递减的数字。不知道如何..

【参考方案1】：

你必须在特定条件下停止myStop函数，当旋转度数在起始位置时。

function myStop(img) 

  console.log(img);
  deg /= 1.1;
  console.log(deg);
  if (deg.toFixed(1) < 0.1) 
    return;
  
  img.css('transform', 'rotate(' + deg + 'deg)');

  if(keepStopping) 
    setTimeout(myStop, 30, img);