Jquery组合滑动/向下并单击

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

以下是定时滑动/向下脚本：

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

这应该是如何工作的是当页面加载时，框在几秒钟后向下滑动，然后如果框未使用，则在几秒钟后向上滑动。此时，可以单击链接，使长方体根据其当前位置向上或向下滑动

---

非常感谢您能为这两种方法的结合提供帮助：）

使用回调函数-

$('.slide-out-div')
    .delay(5000)
    .slideDown(300, function () {
    $('.slide-out-div')        // execute when slideDown is complete
        .delay(5000)
        .slideUp(500);
});

---

---

您可以使用以下超时函数：

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

你试过了吗

---

工作演示：

试试这个简单的切换代码

    <div class="panel">
            <br />
            <br />
            <p>The panel text or login and registraion form goes here....</p>
            <p>sanwebcorner.com</p>
            </div>
            <p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>



$(document).ready(function() {
    $('.pull-me').click(function() {
        $('.panel').slideToggle('slow');
    });
});

面板文本或登录和注册表单位于此处

sanwebcorner.com


$（文档）.ready（函数（）{
$（'.pull me'）。单击（函数（）{
$（'.panel'）.slideToggle（'slow'）；
});
});

---

感谢您的回复。但这似乎是另一个时间幻灯片脚本，它没有包含点击事件。感谢更新。新脚本允许单击事件，但停止计时事件的运行。这就是我一直在绕圈子的地方：（感谢您的反馈，但是它似乎工作不正常。单击链接时，框向下滑动并直接向上，我发现如果您玩一分钟，您的示例也会发生这种情况。@Paul您希望div在单击后的某一时间也向上滑动吗？或者您正在寻找类似的内容吗s-谢谢。我尝试过这个脚本，但是当点击盒子的链接向上滑动时，它会跳到隐藏的位置，然后再次向下滑动（好像盒子当前是隐藏的）。我复制了你的代码，但不确定这是什么时候发生的：这是在小提琴中发生的还是在你尝试将它集成到代码中时发生的？

$(document).ready(function () {
    var slideOut = $('.slide-out-div'), //cache DOM lookup
        tease = function () { //functionize this, in case you want to re-use it
            slideOut.slideDown(300);
            slideOut.delay(5000).slideUp(500);
        };
    $('#clickme').click(function (e) {
        /*
         * clearQueue() clears the [default] animation queue
         * so the slide-out div will behave correctly
         * if #clickme is clicked while tease() is running.
         */
        if (slideOut.is(":hidden")) {
            slideOut.clearQueue().slideDown("slow");
        } else {
            slideOut.clearQueue().slideUp("slow");
        }
        e.preventDefault();
        return false;
    });
    tease(); //tease with the slide-out
});

    <div class="panel">
            <br />
            <br />
            <p>The panel text or login and registraion form goes here....</p>
            <p>sanwebcorner.com</p>
            </div>
            <p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>



$(document).ready(function() {
    $('.pull-me').click(function() {
        $('.panel').slideToggle('slow');
    });
});