Jquery 组合 SlideUp/Down 并单击

Question

我创建了两个脚本，其中一个具有向上滑动和向下滑动命令，这些命令在页面加载时作用于计时器。第二个是单击事件，其中单击链接时执行向上/向下滑动命令。这两个脚本都是单独工作的，但我无法让它们一起工作。

这是定时向上/向下滑动脚本:

$(document).ready(function() {
    $('.slide-out-div').hide();
    $('.slide-out-div')
        .delay(5000)
        .slideDown(300);
    $('.slide-out-div')
        .delay(5000)
        .slideUp(500);
});

这是点击脚本:

window.onload = function() {
    $(document).('#clickme').click(function () {
        if ($('.slide-out-div').is(":hidden")) {
            $('.slide-out-div').slideDown("slow");
        } else {
            $('.slide-out-div').slideUp("slow");
        }
    });
};

其工作原理是，当页面加载时，该框会在几秒钟后向下滑动，如果该框未使用，它会在几秒钟后向上滑动。此时可以单击链接使框根据其当前位置向上或向下滑动。

非常感谢任何帮助让这两者结合起来工作:)

Answer 1

您可以像这样使用超时函数:

<强> Working Example

$(document).ready(function () {
    var timer;
    $('.slide-out-div').slideDown('slow', function () {
        timer = setTimeout(function () {
            $('.slide-out-div').slideUp("slow");
        }, 5000);
    });
    $('#clickme').click(function () {
        if ($('.slide-out-div').is(":hidden")) {
            $('.slide-out-div').slideDown('slow', function () {
                timer = setTimeout(function () {
                    $('.slide-out-div').slideUp("slow");
                }, 5000);
            });
        } else {
            $('.slide-out-div').slideUp('slow');
            clearTimeout(timer);
        }
    });
});