Jquery Combine SlideUp/Down and on click

问题

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

回答1:

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

回答2:

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

回答3:

Have you tried .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/

回答4:

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

来源：https://stackoverflow.com/questions/17316156/jquery-combine-slideup-down-and-on-click