javascript - jQuery .slideToggle()重复

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

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;
}

最佳答案

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

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

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

jsfiddle

该jsfiddle与原始jsfiddle相同，但已添加了对.stop()的调用。