Jquery 组合 SlideUp/Down 并单击

Jquery Combine SlideUp/Down and on click

提问by Paul

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

Here is the click script:

这是点击脚本：

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 :)

非常感谢让这两者结合使用的任何帮助:)

回答by apaul

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

回答by Mohammad Adil

use callback function -

使用回调函数 -

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

---

---

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

回答by pete

Have you tried .clearQueue()?

你试过.clearQueue()吗？

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

Working demo: http://jsfiddle.net/y5vGR/

工作演示：http: //jsfiddle.net/y5vGR/

回答by M. Lak

Try this simple code for toggle

试试这个简单的代码切换

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

Demo Link

演示链接