Задержки внутри очереди FX не ведут себя нормально - PullRequest
Новая
       4

Задержки внутри очереди FX не ведут себя нормально

0 голосов
/ 02 июня 2011

Мне нужно реализовать текстовую ссылку, которая вызывает окно сообщения.

Предпосылки :

  • Когда я нажимаю на ссылку, окно появляется изверх страницы (разворачивается).Ящик имеет непрозрачность 0,9.
  • Когда коробка открыта, она ждет 5 секунд, а затем исчезает.
  • Если я щелкну внутри коробки, когда она открыта, она исчезнет.
  • Если я нажму на ссылку (которая открыла ящик), когда ящик открыт, ничего не произойдет.
  • Конечно, пользователь может много раз щелкнуть ссылку и

Мой подход :

  • В начале я помещаю прямоугольник сверху: -150px (его высота) и делаю его невидимым.
  • Когда пользователь нажимает на ссылку, я узнаю, видна ли коробка.Если это так, я ничего не делаю (для удовлетворения 4-й посылки).
  • Если его не видно, я строю эту fx-очередь: анимирую ее верхнюю позицию до 0px -> задержка в 5 секунд -> исчезновение -> установкаего верхняя позиция равна -150px (начальная позиция).
  • Если пользователь щелкает внутри поля, я очищаю fx очередь, заставляю поле исчезать, а затем устанавливаю его верхнюю позицию на -150px (начальная позиция).

Реализация:

ссылка на jsFiddle 

$.extend($.fn, {

    // Method to open the box
    openMessage: function() {
        var elem = $(this);
        if (!elem.is(":visible")) {
            elem.fadeTo(0, 0.9).animate({
                top: 0
            }).delay(10000).fadeOut(1000, function() {
                elem.css("top", "-150px");
            });
        }
    },

    // Method to close the box when clicking inside it
    closeOnClick: function() {
        var elem = $(this);

        elem.click(function() {
            elem.clearQueue().fadeOut("fast", function() {
                elem.css("top", "-150px");
            });
        });
    }

});


// Text link opens the box
$("#open_message").click(function(e) {
    e.preventDefault();
    $("#message").openMessage();
});

// Clicking in the message will close it
$("#message").closeOnClick();

Моя проблема:

Все идет хорошо, коробка разворачивается, ждет 5 секунд, а затем исчезает.Проблемы приходят, когда я нажимаю внутри коробки.Это исчезает, хорошо, но с этого момента паузы ниже, чем 5 секунд.Если я не щелкаю внутри коробки, всегда ждут 5 седанов, с того момента, как я щелкаю внутри коробки, паузы становятся короче.

Мой вопрос: Что я делаюнеправильно?Я предполагаю, что это проблема очереди, но я не могу найти, где ошибка.

Спасибо!

1 Ответ

1 голос
/ 02 июня 2011

Похоже, проблема в том, где вы делаете задержку. Я бы использовал setTimeout / clearTimeout: 

var t;

$('#link').click(function(){
    showBox();
    t = setTimeout(hideBox, 5000);
});

$('#box').click(function(){
    clearTimeout(t);
    t = setTimeout(hideBox, 5000);
});
...