The effect of HTML design hiding and displaying

Hide and show

A lot of the time we need to hide something from the web, or the app (like PhoneGap using HTML5,JS to develop Android apps, iOS apps).

Here I have summed up several ways:

Note that the jquery package needs to be introduced here, and I'll give you a http://down.51cto.com/data/1357745. Remember to create a directory of jquery in the same directory as your Web page, and put the package in it.

1. Use the Hide () and show () method of jquery. The code below, you can copy to try.

        Hide (), use Show (), and, of course, select the element first.

<! DOCTYPE html>$ (document). Ready (function() {  $ ("#hide"). Click ( function () {  $ ("P"). Hide ();  });  $ ("#show"). Click (function() {  $ ("P"). Show ();  });}); </script>
2. Fade-in Fadein ()----effect: Slowly changing the CSS properties of an element to make it dynamic. This can also be done to hide, display the function.
JQuery FadeIn () method
JQuery fadeIn () is used to fade in hidden elements.
Grammar:
$ (selector). FadeIn (Speed,callback);
The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after fading completes.
<! DOCTYPE html>$ (document). Ready (function(){  $("button"). Click (function(){    $("#div1"). FadeIn (); $("#div2"). FadeIn ("slow")); $("#div3"). FadeIn (3000); });});</script>
3. Swipe to hide and show.
JQuery Slidetoggle () method.
JQuery has the following sliding methods:

 
  

  
   
 
    
Slidedown ()
 
    
Slideup ()
 
    
Slidetoggle ().
 
   
 
  
The JQuery Slidetoggle () method can be toggled between the Slidedown () and the Slideup () method.
If the elements slide down, slidetoggle () can slide them up.
If the elements slide up, slidetoggle () can slide them down.
$ (selector). Slidetoggle (Speed,callback);
The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after the slide is completed.
 <! DOCTYPE html> $ (document). Ready ( function   () {$ ( ". Flip"). Click (function   () {$ ( ". Panel"). Slidetoggle ("Slow" ); });}); </script> <style type= "text/css" > div.panel,p.flip{margin:0px;padding : 5px;text -align:center;background: #e5eecc; border:solid 1px #c3c3c3;} Div.panel{height:120px;display:none;}  </style>
4. Use CSS styles: Display:none is implemented with the show () mode of jquery.
<! DOCTYPE html>$ (document). Ready (function() {  $ ("#show"). Click (  function() {  $ ("#hiddenDIV"). Show ();  });}); </script>
4.