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:

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

Msimbo wa CSS unaonekana hivi:

#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:

$('#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:

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

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

Imepewa muundo:

<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>

body {
	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;
}

Fanya ili kubonyeza kiungo chenye #hide divi, iliyo na orodha, ifichike, na kiungo chenye #show ionekane. Kwa kila athari bainisha muda wa utekelezaji wa 600ms.