javascript - JS mouseenter->加速值增加； mouseleave->减速度值减小(JS mouseenter -> acceleration value increases; mouseleave -> deceleration value decreases)

Question

I'm trying to achieve a mouseover effect.(我正在尝试实现鼠标悬停的效果。)

When the usere hovers the element, it start spinning slowly and over time the speed will increase.(当用户将元素悬停时，它开始缓慢旋转，随着时间的流逝，速度将增加。) When the user leaves the element, the spinning will decrease and eventually stop.(当用户离开该元素时，旋转将减少并最终停止。) My approach would be to set a loop, that multiplies the given value 1. That works.(我的方法是设置一个循环，该循环乘以给定的值1。) Now when the user leaves, I somehow have to get the value and divide it by some number.(现在，当用户离开时，我必须以某种方式获取值并将其除以某个数字。) Thats not working :-((那是行不通的:-() Here my code, I use jQuery(这是我的代码，我使用jQuery) https://codepen.io/hhqh/pen/gOOVQPV?editors=1011(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); } As you see, it just jumps back.(如您所见，它只是跳回去。) I want to slowly decrease the value, but because it rotates and just adds up the number, decreasing actually rotates it backwards.(我想慢慢减小该值，但是因为它旋转并只是将数字相加，所以减小实际上会使它向后旋转。) Maybe I have to get the current rotation, and make a new calculus that is some how adding a decreasing number.(也许我必须获得当前的轮换，并进行新的演算，这就是如何增加递减的数量。) No idea how..(不知道怎么)   ask by Erik Sachse translate from so

Answer 1

You have to stop myStop function in a specific condition, when rotation degrees is at starting position.(当旋转角度处于起始位置时，必须在特定条件下停止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); } }