ドキュメント

Effects/slideDown

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

slideDown( speed, [callback] )

Reveal all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner. As of jQuery 1.3 the vertical padding and vertical margin are also animated, creating a smoother effect.
Arguments:
speedString, Number
A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback (Optional)Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}
Examples:

Animates all divs to slide down and show themselves over 600 milliseconds.

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });

  });
  </script>
  <style>
  div { background:#de9a44; margin:3px; width:80px; 
        height:40px; display:none; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.

    $("div").click(function () {
      $(this).css({ borderStyle:"inset", cursor:"wait" });
      $("input").slideDown(1000,function(){
        $(this).css("border", "2px red inset")
               .filter(".middle")
                 .css("background", "yellow")
                 .focus();
        $("div").css("visibility", "hidden");
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("div").click(function () {
      $(this).css({ borderStyle:"inset", cursor:"wait" });
      $("input").slideDown(1000,function(){
        $(this).css("border", "2px red inset")
               .filter(".middle")
                 .css("background", "yellow")
                 .focus();
        $("div").css("visibility", "hidden");
      });
    });

  });
  </script>
  <style>
  div { background:#cfd; margin:3px; width:50px; 
        text-align:center; float:left; cursor:pointer;
        border:2px outset black; font-weight:bolder; }
  input { display:none; width:120px; float:left; 
          margin:10px; }
  </style>
</head>
<body>
  <div>Push!</div>
  <input type="text" />
  <input type="text" class="middle" />
  <input type="text" />
</body>
</html>

NameType