javascript - jQuery .slideToggle() 重复

Question

因此，当我使用悬停属性调用向下滑动某些文本的函数时。它工作正常，但是当你多次将鼠标移到它上面时它会继续重复。上下滑动，直到它等于您在其上移动鼠标的次数。

JSFiddle

HTML:

<img src="img/icons/Garry's Mod.png" id="gmod-game" />
                <p id="gmod-info">Garry's Mod is a sandbox game that gives it's players access to props, entities, and other things that they can build with. They can also make their own servers where they can make their own gamemodes and add-ons, The game currently hase 45+ different gamemodes with many more server running that gamemode.</p>

CSS:

#gmod-info {
  position: absolute;
  width: 300px;
  height: 120px;
  color: white;
  margin-left: -300px;
  margin-top: -130px;
  display: none;
}

Answer 1

同一元素上的 JQuery 动画排队。也就是说，如果您在前一个动画尚未完成时开始一个动画，则前一个动画将继续运行，并且新动画将在前一个动画完成后才会开始。

您可以调用.stop()在开始下一个动画之前停止任何动画。

$('#gmod-info').stop().slideToggle('slow');

jsfiddle

此 jsfiddle 与原始文件相同，只是添加了对 .stop() 的调用。