Home>

(1) Functional description

Click the "Show" link on the page, and use the show () method to display an image in animated way.At the same time execute a callback function in the method,Used to change the border style of the picture;When you click a displayed picture,Hide the picture animated with hide ().

(2) Implementation code

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>untitled document</title>
<script type="text/javascript" src="../jquery-2.1.4.js"<&/;script
<style type="text/css">
  body {font-size:13px}
  img {display:none;cursor:pointer}
</style>
<script type="text/javascript">
  $(function () {
    $("a"). click (function () {//Show connection
      $("img"). show (3000, function () {
        $(this) .css ("border", "solid 1px #ccc");
        })
      })
      $("img"). click (function () {
        $(this) .hide (3000);
        })
    })
</script>
</head>
<body>
  <a href="javascript:void (0)">show</a>
  <img src="images/dezai.jpg" />
</body>
</html>

Animated display slowly

Detailed usage of jquery hide (), show () method

grammar

$(selector) .hide (speed, callback)

speed with three effect parameters•milliseconds (e.g. 1500)

•"slow"

•"normal"

•"fast"

With speed set,As the element goes from visible to hidden,Gradually changes its height, width, margins, padding, and transparency.

example

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document) .ready (function () {
 $(". btn1"). click (function () {
 $("p"). hide ();
 });
 $(". btn2"). click (function () {
 $("p"). show ();
 });
});
</script>
</head>
<body>
<p>this is a paragraph.</p>
<button>hide</button>
<button>show</button>
</body>
</html>

This is super simple to show and hide.If i want to have an effect, we just need to bring time or parameters in hide or show.

<script type="text/javascript">
$(document) .ready (function () {
 $(". btn1"). click (function () {
 $("p"). hide (1000);
 });
 $(". btn2"). click (function () {
 $("p"). show (1000);
 });
});
</script>

Finally, summarize the show and hide effects of show and hide

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>untitled document</title>
<script src="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
$(document) .ready (function () ());
function hiden () {
$("#divobj"). hide ();//hide () function, to hide,You can also take a time parameter (milliseconds) in brackets.For example, hide (2000) hides at a rate of 2000 milliseconds.
Can also bring slow, fast
}
function slidetoggle () {
$("#divobj"). slidetoggle (2000);//Toggle the curtain effect,Tap to close,Tap to open,Parameters can be none,Parameter description is the same as above
}
function show () {
$("#divobj"). show ();//Display, parameter description is the same as above
}
function toggle () {
$("#divobj"). toggle (2000);//Show hide switch,Parameters can be none,Parameter description is the same as above
}
function slide () {
$("#divobj"). slidedown ();//Curtain effect expansion
}
</script>
</head>
<body>
<h3>Display and hide special effects in div</h3>
<input type="button" value="hidden" onclick="hiden ()" />
 <input type="button" value="display" onclick="show ()" />
 <input type="button" value="curtain effect display 2" onclick="slide ()" />
 <input type="button" value="switching of curtain effect" onclick="slidetoggle ()" />
 <input type="button" value="hide display effect toggle" onclick="toggle ()" />
<div>
    1. Test example<br />
    2. Test example<br />
    3. Test example<br />
    4. Test example<br />
    5. Test example<br />
    6. Test example<br />
    7. Test example<br />
    8. Test example<br />
    9. Test example<br />
    0. Test example<br />
  </div>
</body>
</html>

The above is the show () and hide () methods in jquery that we share with you.Hope you like it.

  • Previous JS achieves fresh style horizontal drop-down menu effect
  • Next Four common POST data submission methods (small summary)