Jquery Combine SlideUp / Down and click

Question

I created two scripts, one of which has a slide up and slide down commands that work with timers when the page loads. The second is a click event when the slide show / down command is executed when a link is clicked. Both of these scenarios work separately, but I cannot get them to work together.

Below is the slide time / 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 script click:

 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 it should work, when the page loads, the window moves down after a few seconds, and then, if the field is not used, it will move after a few seconds. At this point, the link can be clicked to make the window slide up or down depending on its current position.

Any help allowing them to work in combination is greatly appreciated :)

Answer 1

You can use the timeout functions, for example:

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

Answer 2

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

Answer 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/

Answer 4

Try this simple code to switch

  <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