2016-09-10 17 views
3

私はホバー属性を使用して、テキストをスライドさせる関数を呼び出します。それはうまく動作しますが、マウスを複数回動かすと、それは繰り返し続けます。それをマウスの上に移動した時間に等しくなるまで上下にスライドさせます。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; 
} 

答えて

4

jQueryのアニメーション。つまり、前のアニメーションがまだ終了していない状態でアニメーションを開始すると、前のアニメーションが実行され続け、前のアニメーションが終了するまで新しいアニメーションが開始されません。

.stop()に電話して、次のアニメーションを開始する前にアニメーションを停止することができます。

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

jsfiddle

このjsfiddleは.stop()への呼び出しが追加された以外は、オリジナルと同じです。