ドキュメント

Effects/hide

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

hide( )

Hides each of the set of matched elements if they are shown.
Same as hide( speed, [callback] ) without animations. Doesn't change anything if the selected elements are all hidden.
Examples:

Hides all paragraphs then the link on click.

    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return true;
    });

<!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(){
    
    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return true;
    });

  });
  </script>
  
</head>
<body>
  <p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>
</body>
</html>

NameType

hide( speed, [callback] )

Hide all matched elements using a graceful animation and firing an optional callback after completion.

The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed. As of jQuery 1.3 the padding and 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 shown paragraphs to hide slowly, completing the animation within 600 milliseconds.

    $("button").click(function () {
      $("p").hide("slow");
    });    

<!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(){
    
    $("button").click(function () {
      $("p").hide("slow");
    });    

  });
  </script>
  <style>
  p { background:#dad; font-weight:bold; }
  </style>
</head>
<body>
  <button>Hide 'em</button>
  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
</body>
</html>

Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.

    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

<!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(){
    
    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

  });
  </script>
  <style>
  span { background:#def3ca; padding:3px; float:left; }
  </style>
</head>
<body>
  <button id="hidr">Hide</button>
  <button id="showr">Show</button>
  <div>
    <span>Once</span> <span>upon</span> <span>a</span> 
    <span>time</span> <span>there</span> <span>were</span> 
    <span>three</span> <span>programmers...</span>
  </div>
</body>
</html>

Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.

    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

<!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(){
    
    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

  });
  </script>
  <style>
  div { background:#ece0fb; width:30px; 
        height:40px; margin:2px; float:left; }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

NameType