jQuery fadeToggle 如果当前动画，忽略进一步的输入 [英] jQuery fadeToggle if currently animated, ignore further input

问题描述

我有一些缩略图，上面有一个播放按钮，当你悬停时会在它们上面淡出.我的问题是，当您反复将鼠标悬停在它们上时，例如三次，它们会淡入和淡出三遍.我曾经遇到一个 jQuery 函数，其中包含一个 if then 语句，粗略地说它是否是动画忽略进一步的输入.但我不确定做这样的事情的语法是什么.

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.

想法?谢谢！

这是一个 jsFiddle:http://jsfiddle.net/danielredwood/66FwR/10/

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:

JavaScript:

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

推荐答案

改变

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

到

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

http://jsfiddle.net/gaby/66FwR/12/

您提到的 if 语句是使用 :animated 选择器.

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

它看起来像

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

但这在您的情况下不起作用，因为如果您在按钮仍在淡入 -in 时将鼠标悬停，那么淡出将不会排队，播放按钮将永远保持打开状态..

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..

这篇关于jQuery fadeToggle 如果当前动画，忽略进一步的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！