如何在 jquery 中中断动画？

Question

我在列表项上制作了悬停效果。每当我将鼠标悬停在列表项上时，就会发生动画，这是使用 .animate() 完成的。当我将鼠标悬停在列表项之外时，悬停动画在到达其最终点之前不会被覆盖。

当我的光标离开列表项时，阻止列表项执行 hoverIn 效果并使其执行 hoverOut 效果的最佳方法是什么？

var hoverInOptions = {
  'margin-left': '+=50px',
  'font-size': '+=2px',
}
var hoverOutOptions = {
  'margin-left': '-=50px',
  'font-size': '-=2px'
};


$('#menu li').hover(
  function() {
    $(this).animate(hoverInOptions, 2000);
  },
  function() {
    $(this).animate(hoverOutOptions, 200);
  }
);

#menu li {
  display: block;
  width: 150px;
  height: 24px;
  background-color: #FF9933;
  border: 1px solid #309;
  padding: 10px;
  margin: 4px 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

Answer 1

您可以考虑 jQuery 的 stop()。

Stop the currently-running animation on the matched elements.
.stop( [clearQueue ] [, jumpToEnd ] )

由于您的动画是相对于现有位置的（增加或减少边距），我使用 stop(true,true) 清除队列并跳转到当前动画的末尾。

var hoverInOptions = {
  'margin-left': '+=50px',
  'font-size': '+=2px',
}
var hoverOutOptions = {
  'margin-left': '-=50px',
  'font-size': '-=2px'
};


$('#menu li').hover(
  function() {
    $(this).stop(true,true).animate(hoverInOptions, 200);
  },
  function() {
    $(this).stop(true,true).animate(hoverOutOptions, 200);
  }
);

#menu li {
  display: block;
  width: 150px;
  height: 24px;
  background-color: #FF9933;
  border: 1px solid #309;
  padding: 10px;
  margin: 4px 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

但是，如果将动画更改为固定值，则可以避免跳到动画的末尾；下一个动画将从上一个动画停止的位置继续。

var hoverInOptions = {
  'margin-left': '50px',
  'font-size': '1.2em',
}
var hoverOutOptions = {
  'margin-left': '10px',
  'font-size': '1em'
};


$('#menu li').hover(
  function() {
    $(this).stop(true, false).animate(hoverInOptions, 200);
  },
  function() {
    $(this).stop(true, false).animate(hoverOutOptions, 200);
  }
);

#menu li {
  display: block;
  width: 150px;
  height: 24px;
  background-color: #FF9933;
  border: 1px solid #309;
  padding: 10px;
  margin: 4px 10px;
  cursor: pointer;
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

或者，您可以考虑 CSS transition 在没有 JavaScript 的情况下执行动画：

#menu li {
  display: block;
  width: 150px;
  height: 24px;
  background-color: #FF9933;
  border: 1px solid #309;
  padding: 10px;
  margin: 4px 10px;
  cursor: pointer;
  font-size: 1em;
  transition: margin .2s, font-size .2s;
}

#menu li:hover {
  margin-left: 50px;
  font-size: 1.2em;
}

<ul id="menu">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

如何在 jquery 中中断动画？

How to break an animation in jquery?

html

css

jquery

jquery-animate