时间戳

首页 > 解决方案 > JS mouseenter -> 加速度值增加；mouseleave -> 减速值减小

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

问题描述

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

我的方法是设置一个循环，将给定值乘以 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);
}

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

标签： javascriptjqueryanimationacceleration

解决方案

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);
  }
}

推荐阅读