Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery fadeToggle if currently animated, ignore further input
    primarykey
    data
    text
    <p>I've got some thumbnails that have a play button that fades in on top of them when you hover. My issue is that when you hover over them repeatedly, say three times, they fade in and out three times. I once ran into a jQuery function that included an if then statement roughly saying if it's animated disregard further input.. But I'm not sure what the syntax is to do such a thing.</p> <p>Ideas? Thank you!</p> <p>Here's a jsFiddle: <a href="http://jsfiddle.net/danielredwood/66FwR/10/" rel="nofollow">http://jsfiddle.net/danielredwood/66FwR/10/</a></p> <p>HTML:</p> <pre><code>&lt;div id="music_right"&gt; &lt;div class="thumbnail" id="paparazzi"&gt; &lt;a class="playback"&gt; &lt;img class="play" src="http://www.lucisz.com/imgs/play.png" /&gt; &lt;/a&gt; &lt;audio&gt; &lt;source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /&gt; &lt;source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /&gt; Your browser does not support HTML5 audio. &lt;/audio&gt; &lt;/div&gt; &lt;div class="thumbnail" id="danceinthedark"&gt; &lt;a class="playback"&gt; &lt;img class="play" src="http://www.lucisz.com/imgs/play.png" /&gt; &lt;/a&gt; &lt;audio&gt; &lt;source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" /&gt; &lt;source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" /&gt; Your browser does not support HTML5 audio. &lt;/audio&gt; &lt;/div&gt; &lt;div class="thumbnail" id="bornthisway"&gt; &lt;a class="playback"&gt; &lt;img class="play" src="http://www.lucisz.com/imgs/play.png" /&gt; &lt;/a&gt; &lt;audio&gt; &lt;source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" /&gt; &lt;source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" /&gt; Your browser does not support HTML5 audio. &lt;/audio&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JavaScript:</p> <pre><code>$('.play').hide(); $('.thumbnail').hover(function(){ $('.play', this).fadeToggle(400); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload