Jquery组合SlideUp / Down并单击 [英] Jquery Combine SlideUp/Down and on click

问题描述

我创建了两个脚本，一个具有向上滑动和向下滑动的命令，这些命令在加载页面时对定时器起作用。第二个是单击事件，其中单击链接时执行slideup / down命令。这两个脚本分开工作，但我不能让它们一起工作。

I have created two scripts, one which has slide up and slide down commands which work on timers when the page is loaded. The second is a click event where a slideup/down command is executed when a link is clicked. Both these scripts work separately but I cannot get them to work together.

这是定时的上传/下移脚本：

Here is the timed slideup/down script:

$(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");
        }
    });
};

这应该如何工作是在页面加载时，盒子在几秒后向下滑动，然后如果没有使用盒子，它会在几秒后滑动。此时，可以单击链接以使框根据其当前位置向上或向下滑动。

How this is supposed to work is when the page is loaded the box slides down after a few seconds, then if the box is not used it slides up after a few seconds. At this point the link can be clicked to make the box slide up or down depending on its current position.

非常感谢任何帮助使这两者组合起来的帮助： ）

Any help getting these two to work in combination is greatly appreciated :)

推荐答案

你可以使用这样的超时函数：

You could use timeout functions like so:

工作示例

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);
        }
    });
});

这篇关于Jquery组合SlideUp / Down并单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！