Question

我需要实现一个触发消息框的文本链接。

处所：

当我点击链接时，该框出现在页面顶部（展开）。该方框的不透明度为0.9。
当盒子打开时，等待5秒然后淡出。
如果我在打开时点击框内部，它就会淡出。
如果我在框打开时单击链接（触发框的那个），则不会发生任何事情。
当然，用户可以在链接上多次点击

我的方法：

在开始时，我将盒子置于顶部：-150px（高度）并使其不可见。
当用户点击链接时，我会发现该框是否可见。如果是的话，我什么也不做（为了满足第四个前提）。
如果它不可见，那么我构建这个fx队列：将其顶部位置设置为0px - ＆gt;延迟5秒 - ＆gt;淡出 - ＆gt;将其最高位置设置为-150px（起始位置）。
如果用户在框中单击，我清除fx队列，使框淡出，然后将其顶部位置设置为-150px（开始位置）。

实施

$.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个sedons，从我在框内单击的那一刻起，暂停时间会缩短。

我的问题： 我做错了什么？我想这是一个队列问题，但我找不到错误的位置。

谢谢！

Answer 1

听起来问题就是你在做延迟的地方。我会使用setTimeout / clearTimeout：

var t;

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

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

fx队列内的延迟表现不正常

1 个答案: