正在停止 jquery 个进程

Question

我有一个 div 隐藏在页面之外，其中一部分是可见的，例如：

div{
    left: -100px;
    width: 150px;
    height: 50px;
}

我用jquery来显示整个div:

$("div").hover(function(){ 
    $("div").animate({left: '0px'});
},function(){
    $("div").animate({left: '-100px'}); 
});

当我 hover 越过 div 并快速 unhover 多次时，似乎播放动画的次数与我这样做的次数相同。如果我停止将鼠标悬停在 div 上，如何让它在动画中停止，以及如何让动画仅在我将鼠标悬停在它上面一定时间后才开始。

Answer 1

您可以使用.stop()停止上一个动画。

$("div").hover(function() {
  $("div").stop().animate({
    left: '0px'
  }, "slow");
}, function() {
  $("div").stop().animate({
    left: '-100px'
  });
}, "slow");

div {
  left: -100px;
  width: 150px;
  height: 50px;
  background-color: blue;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

如果你想让它等到你悬停一段时间后才开始动画，你可以使用setTimeout，你可以在unhover函数中取消超时。

var hoverTimer;
$("div").hover(function() {
  hoverTimer = setTimeout(function() {
    $("div").stop().animate({
      left: '0px'
    }, "slow");
  }, 1000);
}, function() {
  clearTimeout(hoverTimer);
  $("div").stop().animate({
    left: '-100px'
  });
}, "slow");

div {
  left: -100px;
  width: 150px;
  height: 50px;
  background-color: blue;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

正在停止 jquery 个进程

Stopping jquery process

javascript

jquery

animation

jquery-animate