efectos - toggle effects jquery

jQuery fadeToggle si está animado actualmente, ignora más entradas

Question

Tengo algunas miniaturas que tienen un botón de reproducción que se desvanece sobre ellas cuando pasas el mouse sobre ellas. Mi problema es que cuando pasas el cursor sobre ellos varias veces, digamos tres veces, aparecen y desaparecen tres veces. Una vez me encontré con una función de jQuery que incluía una declaración if then que decía, si se trataba de una animación animada, ignorar más entradas ... Pero no estoy seguro de cuál es la sintaxis para hacer tal cosa.

Ideas? ¡Gracias!

Aquí hay un 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

Cambio

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

a

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

tu violín actualizado en http://jsfiddle.net/gaby/66FwR/12/

La instrucción if que mencionas está usando el selector :animated .

se vería algo así como

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

pero eso no funcionará en su caso, porque si se desplaza hacia afuera mientras el botón aún se está desvaneciendo, entonces el fundido de salida no se pondrá en cola y el botón de reproducción permanecerá encendida para siempre.

Answer 2

Esto se debe a la espera del evento. La forma en que normalmente lo haré así:

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

el stop () hace lo que parece. Detiene toda la animación y, desde las cadenas de jQuery, llama a la animación después de que el objeto se haya detenido.

No obtienes el método de alternar, pero prefiero hacerlo de esta manera debido al control que obtengo en el método animado de jQuery.