Effects in jqurey hide, show,

jQuery hide() 和 show()

With jQuery, you can hide and show HTML elements using the hide() and show() methods:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click the "Hide" button, I will disappear. </p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

grammar:

    $( 
   selector).hide( 
   speed,callback); 
   
 
   
$( 
   selector).show( 
   speed,callback); 
  

The optional speed parameter specifies the speed to hide/show and can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function to execute when the hide or show is done.

The following example demonstrates the hide() method with the speed parameter:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
$(document).ready(function(){
  $("button").click(function(){
    $("p").show(1000);
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<button>显示</button>
<p>This is a paragraph with less content. </p>
<p>This is another small paragraph</p>
</body>
</html>

jQuery toggle()

With jQuery, you can use the toggle() method to toggle the hide() and show() methods.

Show hidden elements, and hide shown elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>Hide/Show</button>
<p>This is a paragraph of text. </p>
<p>This is another paragraph of text. </p>
</body>
</html>

grammar:

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

The optional speed parameter specifies the speed to hide/show and can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function to execute when the hide or show is done.

For the optional callback parameter, there are two notes:

1. If the number of elements selected by $( selector ) is n, the callback function will be executed n times;

2. Add parentheses after the callback function name, and the function body will be executed immediately instead of waiting until the display/hide is completed;

3.callback can be either a function name or an anonymous function;

The number of elements selected by $(selector) is n, and the callback function will be executed n times.

For this, when the callback function is added with parentheses, the function is executed immediately and will only be called once. If the parentheses are not added, the function will be called multiple times after the element is displayed or hidden.