Metodes hide un show jQuery

Efekti ļauj animēt elementu, piemēram - vienmērīgi to paslēpt vai parādīt. Katram efektam ir savas jQuery metodes. Sāksim ar metodēm hide un show. Metodes hide un show ļauj slēpt un rādīt elementus. Apskatīsim to darbību.

Sākumā ņemsim šādu HTML kodu:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>

CSS kods izskatās šādi:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

Tagad uzrakstīsim Javascript kodu, saskaņā ar kuru noklikšķinot uz pogas #hide elements tiks paslēpts, bet noklikšķinot uz #show - parādīts:

javascript$('#hide').click(function() {
  $('#elem').hide();
});

$('#show').click(function() {
  $('#elem').show();
});

Var iestatīt efekta izpildes laiku milisekundēs (1000 milisekundes = 1 sekunde). Šajā gadījumā efekts tiks vienmērīgi atskaņots norādītajā laikā. Iestatīsim efekta izpildes laiku 1 sekundi un redzēsim, kā efekts mainīsies:

javascript$('#hide').click(function() {
  $('#elem').hide(1000);
});

$('#show').click(function() {
  $('#elem').show(1000);
});

html<p>
  <a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
  <ol>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ol>
</div>

cssbody {
  font-size: 18px;
}
a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ol {
  margin: 0px;
  padding-left: 10px;
}
li {
  list-style-type: inside;
}
div {
  display: inline-block;
  padding: 30px;
  border: 1px solid black;
  cursor: pointer;
  margin-bottom: 20px;
}