我有一些缩略图,当你悬停时,它们会有一个淡入淡出的播放按钮.我的问题是,当你反复盘旋它们时,说三次,它们会淡入淡出三次.我曾经遇到过一个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);
- });
解决方法
更改
- $('.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..
- }
但是在你的情况下这不起作用,因为如果你在按钮仍然淡入时徘徊,那么淡出将不会排队,播放按钮将永远保持…
