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，并且可以在取消悬停功能中取消超时。

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进程

1 个答案: