Question

我有一些缩略图，当你悬停时，它们会有一个淡入淡出的播放按钮。我的问题是，当你反复盘旋它们时，说三次，它们会淡入淡出三次。我曾经遇到过一个jQuery函数，其中包含一个if then语句粗略地说它是否是动画而忽略了进一步的输入..但我不确定语法是做什么的。

想法？谢谢！

这是一个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

更改

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

到

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

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

的更新小提琴

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

它看起来像

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

但是在你的情况下这不起作用，因为如果你在按钮仍然淡出的情况下将鼠标悬停在中，那么淡出将不会排队，播放按钮将永远保持打开状态。

Answer 2

这是由于事件排队造成的。我通常会这样做：

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

stop（）听起来像是听起来像。停止所有动画，因为jQuery的链，在对象停止后调用动画。

你没有得到toggle方法，但我宁愿这样做，因为我在jQuery的animate方法中得到了控制。

jQuery fadeToggle如果当前是动画的，则忽略进一步的输入

2 个答案: