jquery добавляет задержку для анимации при наведении мыши, только если предыдущая анимация завершена - PullRequest
Новая
       24

jquery добавляет задержку для анимации при наведении мыши, только если предыдущая анимация завершена

2 голосов
/ 16 марта 2012

У меня есть небольшой фрагмент jQuery, который анимирует заголовок изображения, основываясь на атрибуте alt изображения, если он существует.

Работает нормально, но у меня есть одна маленькая проблема. Мне нужна анимация delay на всплывающей подсказке (slideUp), но только , если предыдущая slideIn анимация завершена полностью . В основных сценариях:

сценарий 1: Пользователь наводит курсор на изображение, заголовок полностью анимируется. Пользователь перемещается, анимация задерживается (заголовок остается на месте) в течение 2 секунд, а затем выводится.

сценарий 2: Пользователь наводит курсор на изображение, заголовок начинает анимацию, но пользователь наводит курсор на него до его завершения. Анимация должна немедленно останавливаться и анимироваться без задержки.

Сценарий 1 работает отлично. сценарий 2 нет. Задержка происходит на частично анимированных элементах, прежде чем она выскользнет, ​​что нежелательно. Я вижу недостаток в своем коде, но не могу понять, как его устранить.

Fiddle и текущий скрипт: 

$('.pv-inner').hover(function() {

    var img = $(this).find('img:first');
    var text = img.attr('alt');

    if (text !== undefined) {
        //remove any existing captions
        $(this).find('.kppImageCaption').remove();

        //insert the new caption
        img.after('<div class="kppImageText">' + text + '</div><div class="kppImageCaption"></div>');

        //animate it in
        $(this).find('.kppImageCaption').stop().slideDown('slow').animate({
            opacity: 0.6
        }, {
            queue: false,
            duration: 'slow',
            complete: function() {
                $(this).parent().find('.kppImageText').fadeTo(1000, 1);
            }
        });
    }
}, function() {

    //on hover out animate it out. Here is the problem. I only want the delay 
    //to occur if the above hover over animation completed - currently it delays
    //in all cases.
    $(this).find('.kppImageCaption, .kppImageText').stop().delay(2000).slideUp('slow', function() {
        $(this).remove();
    });

});

РЕДАКТИРОВАТЬ :

Окончательная рабочая скрипка . Может помочь кому-нибудь в будущем.

1 Ответ

1 голос
/ 16 марта 2012

Создайте переменную, назовем ее var animationStatus = false Непосредственно перед началом его анимации установите animationStatus = true

in complete функция (см. JQuery animate docs) установлена ​​animationStatus = false

В вашей функции, которая отвечает за сокрытие - создайте оператор if. Если animationStatus === false - задержка. Если animationStatus === true - без задержки.

Удачи!

...