Mbinu za hide na show katika jQuery

Athari huruhusu kuongeza uhuishaji kwa kipengele, kwa mfano - kukificha au kukionyesha kwa upole. Kwa kilia athari kuna mbinu zake za jQuery. Wacha tuanze na mbinu za hide na show. Mbinu hide na show huruhusu kuficha na kuonyesha vipengele. Hebu tuzichunguze.

Kuanza, tuchukue msimbo wa HTML ufuatao:

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

Msimbo wa CSS unaonekana hivi:

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

Sasa tuandike msimbo wa Javascript, ambayo kubonyeza kitufe #hide kipengele kitafichika, na kubonyeza #show - kitaonekana:

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

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

Inawezekana kubainisha muda wa utekelezaji wa athari kwa millisecond (1000 millisecond = 1 sekunde). Katika kesi hii, athari itachezwa kwa upole kwa muda uliobainishwa. Wacha tubainishe muda wa utekelezaji wa athari kwa 1 sekunde na tuone jinsi athari inavyobadilika:

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>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</li>
    <li>maandishi</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;
}