javascript 悬停时的连续动画（性能）

Continuous animation on hover (performance)

提问by thv20

I've created a jQuery function that scrolls a DIV by decreasing the left-margin of the element. It works, but it's incredibly slow. It eats up 100% CPU in no time :s

我创建了一个 jQuery 函数，它通过减少元素的左边距来滚动 DIV。它有效，但速度非常慢。它很快就吃掉了 100% 的 CPU :s

$(".scroll").hover(
    function () {
        var scroll_offset = parseInt($('#content').css('margin-left'));
        sliderInt = self.setInterval(function(){
            $content.css({'margin-left':scroll_offset+'px'});
            scroll_offset--;
        },8);
    }, 
    function () {
        clearInterval(sliderInt);
    }
);

Obviously I am running this function every 8ms, which is asking a lot. I'm already cacheing my selectors, so I don't know what I can do to improve performance. Am I just going about it the wrong way?

显然我每 8 毫秒运行一次这个函数，这要求很高。我已经在缓存我的选择器，所以我不知道我可以做些什么来提高性能。我只是以错误的方式去做吗？

回答by Roko C. Buljan

function play () {
  $('#ball').animate({left: '+=20'}, 100, 'linear', play);
}

function pause () {
  $('#ball').stop();
}

$("#bar").hover( play, pause );

#bar {
  margin-top: 20px;
  background: #444;
  height: 20px;
}
#bar:hover #ball {
  background: lightgreen;
}

#ball {
  position: relative;
  left: 0;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}

<div id="bar">
  <div id="ball"></div>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

This is really simplewithout the setInterval or even setTimeout.

这真的很简单，没有 setInterval 甚至 setTimeout。

• The only important thing is to know that .animate()accepts a function callback, ideal for our purpose to create loop a function. Make sure to use the lineareasing instead of the default 'swing' to make our loop constant.
• To stop our animations we can use stop()to prevent animation buildups.
• Simply create 2 functions and use them in your hovermethod.

• 唯一重要的是要知道.animate()接受函数回调，非常适合我们创建循环函数的目的。确保使用linear缓动而不是默认的“摆动”来使我们的循环保持不变。
• 为了停止我们的动画，我们可以使用stop()防止动画堆积。
• 只需创建 2 个函数并在您的hover方法中使用它们。

---

---

Using CSS3

使用 CSS3

and toggling play/pause classes using jQuery:

并使用 jQuery 切换播放/暂停类：

function play() {
  $('#ball').addClass("play").removeClass("pause");
}

function pause() {
  $('#ball').addClass("pause"); // don't remove .play here
}

$("#bar").hover(play, pause);

#bar {
  margin-top: 20px;
  background: #444;
  height: 20px;
}
#bar:hover #ball {
  background: lightgreen;
}
#ball {
  position: relative;
  left: 0;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}

.play {
  animation: ball-anim 5s infinite linear;
}
.pause {
  animation-play-state: paused;
}
@keyframes ball-anim {
  0%   { left: 0; }
  50%  { left: calc(100% - 20px); }
  100% { left: 0; }
}

<div id="bar">
  <div id="ball"></div>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

回答by Alp

.animate()is a good way to do it. Example:

.animate()是一个很好的方法。例子：

$(".scroll").hover(function(){
  $("#content").animate({
    marginLeft: "100px",
  }, 1500 );
});?

Working DEMO

工作演示

Read the documentation to get the idea how to use it.

阅读文档以了解如何使用它。