Как запустить / остановить / перезапустить анимацию jQuery

Question

У меня есть следующая функция, которая при вызове отображает сообщение пользователю в течение определенного времени (5 секунд в моем случае). В течение этого «периода», если я снова вызываю функцию для отображения другого сообщения, практически она должна скрыться, а затем вновь появляется с новым сообщением еще 5 секунд.

Что происходит с моим кодом ниже, я вызываю функцию для отображения сообщения. Затем, скажем, на 4-й секунде, я вызываю его снова, чтобы отобразить другое сообщение, новое сообщение отображается в течение 1 секунды.

Мне нужно как-то сбросить время, но не могу понять, как. Попытка остановить анимацию, проверить, был ли элемент видим, и скрыть его, если это было, и многое другое. Я считаю, что решение - это простая цепочка проблем, но я не могу понять ее правильно. Так что любая помощь будет оценена!

function display_message(msgType, message) {

    var elem = $('#ur_messagebox');

    switch (msgType) {
        case 'confirm':
            elem.addClass('msg_confirm');
            break;

        case 'error':
            elem.addClass('msg_error');
            break;
    }

    elem.html(message);
    elem.show().delay(5000).fadeOut(1000);
}

спасибо заранее ...

Answer 1

Короче говоря, вы не можете использовать .delay() для того, что вы хотите. Это просто оболочка для setTimeout() в следующем элементе очереди, Вы можете увидеть источник здесь , важная часть:

    return this.queue( type, function() {
        var elem = this;
        setTimeout(function() {
            jQuery.dequeue( elem, type );
        }, time );
    });

Так что это просто очередь setTimeout(), которая при выполнении удаляет следующий элемент в очереди и выполняет его. Итак, что происходит, вы добавили задержку, и даже с .stop(true) или .clearQueue(), когда вы ставите в очередь .fadeOut() после этого вы Вы добавляете это обратно в ту же fx очередь, поэтому, когда это setTimeout() заканчивается через 5 секунд, он захватывает new fade, который вы поставили в очередь, и выполняет его.

Вам нужно будет setTimout() и очистить его вручную, поскольку ядро ​​jQuery не имеет этого встроенного, что-то вроде этого:

function display_message(msgType, message) {
  var mb = $('#ur_messagebox')
           .addClass(msgType === 'confirm' ? 'msg_confirm' : 'msg_error')
           .html(message)
           .stop(true, true).fadeIn();
  if(mb.data('delay')) clearTimeout(mb.data('delay'));
  mb.data('delay', setTimeout(function() { mb.fadeOut(1000); }, 5000));
}

Рабочее демо можно посмотреть здесь

Answer 2

Как Ник указал:

Короче говоря, вы не можете использовать .delay () для того, что вы хотите.

Но есть простой обходной путь: вместо использования .delay(x) просто используйте .fadeTo(x,1).

По сути, это исчезнет до полной непрозрачности, но, поскольку окно сообщения уже находится в полной непрозрачности, это ничего не делает, кроме задержки следующей анимации на x миллисекунды. И преимущество в том, что .fadeTo() можно остановить / прервать с помощью .stop(true).

Answer 3

если используется jQuery, просто завершите текущую анимацию, прежде чем перезапустить ее снова:

tooltip.finish();// set a defined start for animation
tooltip.show();
tooltip.delay(4000).fadeOut(1500);

Answer 4

Я перезапускаю анимацию следующим образом: (хотя не уверен, что это совершенно правильно)

$ (element) .stop (). ClearQueue ();

$ (element) .delay(20). Оживить ({...});

Answer 5

Я получал конфликты CSS, потому что вы никогда не удаляете классы msg перед добавлением других, поэтому я очистил их с помощью elem.removeClass('msg_confirm msg_error'); в дополнение к решению проблемы:

function display_message(msgType, message) {

    var elem = $('#ur_messagebox');
    elem.removeClass('msg_confirm msg_error');

    switch (msgType) {
        case 'confirm':
            elem.addClass('msg_confirm');
            break;

        case 'error':
            elem.addClass('msg_error');
            break;
    }

    elem.stop().css({opacity:1}).clearQueue();
    elem.html(message);
    elem.show().delay(5000).fadeOut(1000);
}

Таким образом, с помощью elem.stop().css({opacity:1}).clearQueue(); я прекращаю анимацию, сбрасываю прозрачность, если она была в середине затухания, и очищаю очередь перед добавлением сообщения и перезапуском очереди. Я проверил это, и оно должно работать для вас.

Answer 6

Попробуйте это.

elem.stop().show().delay(5000).fadeOut(1000);