Introduction with JQUERY - Playing with slideDown() and slideUp Methods

Guest Posts Paolo Nikko Nuñal

JQUERY hosts a lot of functions, and one of which is the JQUERY Sliding Methods that you can have on your elements. Gone are the days where marquee was a cool way of giving effects to your HTML page. With JQUERY you can play around with different set of features and have an endless possibility of making your page dynamic and user-friendly to play around with.

JQUERY Sliding Methods.

With JQUERY you can create sliding effect using the following methods:

slideDown() - Useful for sliding down an element.

slideUp() - Useful for sliding up an element.

slideToggle() - Useful for toggling an element down or up.

Syntax:

$(selector).slideDown(speed,callback);

The optional parameter "speed" specifies the duration of the effect. It can take the following methods like "fast" or "slow" or numbers to be inputted that represents milliseconds.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>


$(document).ready(function(){
     $("#slide").click(function(){
         $("#message").slideDown("slow");
    )};


)};
</script>
<style type="text/css">
#slide,#message
{
  padding:5px;
  text-align:center;
  background-color:RED;
  border:solid 1px #000000;
}
#message
{
  padding:50px;
  display:none;
}
</style>
</head>
<body>
<div id="slide">Click to Slide</div>
<div id="message">The quick brown fox jumps over the lazy dog.</div>


Base from the example above you can see how the slideDown() method slides down the div with the id "#message".

The next one we are going to demo is the slideUp() method.

Syntax:

$(selector).slideUp(speed,callback);

The optional parameter "speed" specifies the duration of the effect the same with the slideDown() method. It can take the following methods like "fast" or "slow" or numbers to be inputted that represents milliseconds.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>


$(document).ready(function(){
     $("#slide").click(function(){
         $("#message").slideUp("slow");
    )};


)};
</script>
<style type="text/css">
#slide,#message
{
  padding:5px;
  text-align:center;
  background-color:RED;
  border:solid 1px #000000;
}
#message
{
  padding:50px;
  display:none;
}
</style>
</head>
<body>
<div id="slide">Click to Slide Up</div>
<div id="message">The quick brown fox jumps over the lazy dog.</div>


Base from the example above you can see how the slideUp() method slides up the div with the id "#message".

Last but not the least is the slideToggle() method. The JQUERY slideToggle() method lets you toggle down between slideDown() and slideUp() methods. If the element has been slide down, then it will be slide up and vice versa.



Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here



Syntax:

$(selector).slideToggle(speed,callback);

The optional parameter "speed" specifies the duration of the effect the same with the slideDown() method. It can take the following methods like "fast" or "slow" or numbers to be inputted that represents milliseconds.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>


$(document).ready(function(){
     $("#toggle").click(function(){
          $("#message").slideToggle("slow");
    )};


)};
</script>
<style type="text/css">
#toggle,#message
{
  padding:5px;
  text-align:center;
  background-color:RED;
  border:solid 1px #000000;
}
#message
{
  padding:50px;
  display:none;
}
</style>
</head>
<body>
<div id="toggle">Click to Toggle</div>
<div id="message">The quick brown fox jumps over the lazy dog.</div>
</body>
</html>


That's it. When you click, it will automatically toggle up or down depending on the current state.



Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here