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

问题描述

我有一些缩略图，其中有一个播放按钮，当您悬停时，它们会淡入其中。我的问题是，当你屡次徘徊在他们身上时，说三遍，他们会淡入淡出三次。我曾经碰到过一个jQuery函数，其中包含一个if then语句，粗略地说，它是否是动画，无视进一步的输入。但我不确定语法是做什么的。

想法？谢谢！

这是一个jsFiddle：

---

您提到的if语句是使用 ：animated $ b





 <$ c 
 
 
 
 
 
 
 
 
 $ b code> 

但在您的情况下不起作用，因为如果您在按钮仍在淡出时悬停在外， ，那么淡出不会排队，播放按钮将永远保持。


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);
});

解决方案

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

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