jQuery fadeToggle if currently animated, ignore further input

Question

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.

Ideas? Thank you!

Here's a jsFiddle: http://jsfiddle.net/danielredwood/66FwR/10/

HTML:

<div id="music_right">
        <div class="thumbnail" id="paparazzi">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
               </a>
            <audio>
                   <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="danceinthedark">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
               </a>
            <audio>
                   <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="bornthisway">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
               </a>
            <audio>
                   <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
    </div>

JavaScript:

$('.play').hide();
$('.thumbnail').hover(function(){
    $('.play', this).fadeToggle(400);
});

Answer 1

Change

$('.play', this).fadeToggle(400);

to

$('.play', this).stop(true,true).fadeToggle(400);

your updated fiddle at http://jsfiddle.net/gaby/66FwR/12/

---

The if statement you mention is by using the :animated selector.

it would look something like

if ( $('.play',this).is(':animated') )
{
 // do whatever..
}

but that will not work in your case, because if you hover out while the button is still fading-in, then the fade-out will not queue and the play button will stay on forever..

Answer 2

This is due to queueing of the event. The way I will usually do it like this:

$(".thumbnail").hover(function(){
    $(".play", this).stop().animate({opacity:1}, "fast");
}, function(){
    $(".play", this).stop().animate({opacity:0}, "fast");
});

the stop() does what it sounds like. Stops all animation and since jQuery's chains, calls the animate after the object has stopped.

You don't get the toggle method but I rather doing it this way because of the control I get in jQuery's animate method.