Next »
183/185
« Previous

.slideUp()

In this chapter you will learn:

  1. Syntax and Description for .slideUp()
  2. Slide up fast
  3. Click to slide up
  4. Slide up a DIV tag
  5. Slide up callback
  6. Slide up fast
  7. Slide up form controls
  8. Slide up in milliseconds
  9. Slide up slowly
  10. Animates div to slide up
  11. Animates all form controls to slide up

Syntax and Description

$(selector).slideUp([speed,] [easing,] [callback]);

All three arguments are optional. The speed, or duration of the animation, can be indicated as either a number (representing milliseconds) or as a string 'fast' or 'slow'.

  • duration (optional)A string or number determining how long the animation will run
  • callback (optional)A function to call once the animation is complete

A 'fast' animation is 200 milliseconds whereas a 'slow' animation is 600 milliseconds.

If the speed (aka duration) is omitted, the default speed is 400 milliseconds.

$.slideUp() accepts a callback function, which is executed once the $.slideUp() function has finished executing.

Slide up fast

<!DOCTYPE html><!--   j a va2s .  co  m-->
<html>
<head>
<style type="text/css">
div {
  text-align: center;
  color: white;
  font-size: xx-large;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: orange;
}
</style>
<script
  src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("div#message").click(function(e) {
      e.stopPropagation();
      $("div#message").slideUp('fast');
    });
    $(document).click(function() {
      $("div#message").slideDown('fast');
    });
  });
</script>
</head>
<body>
  <div id="message">This is a message.</div>
</body>
</html>

Click to view the demo

Click to slide up

<html><!-- j ava  2s .  co m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p").click(function () { 
                   $(this).slideUp(); 
              });
        });
    </script>
  </head>
  <body>
    <body>
       <p>java2s.com</p>
       <p>java2s.com</p>
    </body>
</html>

Click to view the demo

Slide up a DIV tag

<html><!--from   j a  va2s  .  c  o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("div").click(function () {
                    $("div").slideUp();
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me</div>
    </body>
</html>

Click to view the demo

Slide up callback

<html><!--from jav  a  2 s  . c o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).parent().slideUp("slow", function () {
                      alert("done");
                  });
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Slide up fast

<html><!--from   j  a va2s.co  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("div").click(function () {
                    $("div").slideUp("fast");
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me</div>
    </body>
</html>

Click to view the demo

Slide up form controls

<html><!--from   j  a v  a2s.co m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).parent().slideUp("slow", function () {
                      alert("done");
                  });
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Slide up in milliseconds

<html><!--from  j ava2  s  .  c  o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("div").click(function () {
                    $("div").slideUp(2000);
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me java2s.com</div>
    </body>
</html>

Click to view the demo

Slide up slowly

<html><!--  j a va 2s  .  c  o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("div").click(function () {
                    $("div").slideUp("slow");
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me java2s.com</div>
    </body>
</html>

Click to view the demo

Animates div to slide up

Animates div to slide up, completing the animation within 400 milliseconds.

<html><!--  j a v  a2  s.co  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document.body).click(function () {
              if ($("div:first").is(":hidden")) {
                $("div").show("slow");
              } else {
                $("div").slideUp();
              }
            });
        });
    </script>
  </head>
  <body>
    <body>
        Click me!
          <div>java2s.com</div>
          <div>java2s.com</div>
        
          <div>java2s.com</div>
          <div>java2s.com</div>
          <div>java2s.com</div>
    </body>
</html>

Click to view the demo

Animates all form controls to slide up

<html><!--from   j a va  2s .c o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function () {
              $(this).parent().slideUp("slow", function () {
                $("#msg").text($("button", this).text() + " has completed.");
              });
            });
        });
    </script>
  </head>
  <body>
    <body>
        <button>Hide One</button>
        <input type="text" value="One" />
        <button>Hide Two</button>
        <input type="text" value="Two" />
        <button>Hide Three</button>
    
        <input type="text" value="Three" />
        <div id="msg"></div>
    </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. Syntax and Description for .stop() method
Next »
« Previous
Home » jQuery » Effect
.animate()
.css() does animation
.clearQueue()
.delay()
.dequeue()
.extend()
.fadeIn()
.fadeOut()
.fadeTo()
.hide()
.queue()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.toggle()