jQuery fadeToggle, если в данный момент анимирован, игнорировать дальнейший ввод - PullRequest
Новая
       38

jQuery fadeToggle, если в данный момент анимирован, игнорировать дальнейший ввод

3 голосов
/ 20 апреля 2011

У меня есть несколько миниатюр, которые имеют кнопку воспроизведения, которая появляется на них при наведении курсора.Моя проблема в том, что когда вы наводите курсор на них несколько раз, скажем три раза, они исчезают и исчезают три раза.Однажды я столкнулся с функцией 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);
});

Ответы [ 2 ]

6 голосов
/ 20 апреля 2011

Изменение 

$('.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..
}

но это не сработает в вашем случае, потому что если вы наведите курсор мыши, пока кнопка все еще затухает - в , то затухание не будет стоять в очереди, и кнопка воспроизведения останется включенной навсегда ..

1 голос
/ 20 апреля 2011

Это связано с очередью события.Обычно я делаю это так: 

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

stop () делает то, на что это похоже.Останавливает всю анимацию и, поскольку цепочки jQuery, вызывает animate после остановки объекта.

Вы не получаете метод toggle, но я предпочитаю делать это таким образом из-за контроля, который я получаю в методе jimate jQuery.

...