CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matt.Owen
Matt.Owen

Reputation: 391

jQuery .slideToggle() repeating

So when I use a hover attribute to call a function that slides some text down. It works fine, But when you move your mouse over it multiple times it continues to repeat. Sliding up and down, until it equals the amount of times you moved the mouse over it.

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

Upvotes: 3

Views: 939

Answers (1)

John S
John S

Reputation: 21482

JQuery animations on the same element queue up. That is, if you start an animation while the previous one has not yet finished, the previous animation will continue to run, and the new animation will not start until after the previous one has finished.

You can call .stop() to stop any animations before starting the next one.

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

jsfiddle

This jsfiddle is the same as the original, except the call to .stop() has been added.

Upvotes: 6

Related Questions