jQuery में hide और show विधियाँ

प्रभाव (effects) तत्व को एनिमेट करने की अनुमति देते हैं, उदाहरण के लिए - इसे धीरे-धीरे छिपाना या दिखाना। प्रत्येक प्रभाव के लिए jQuery की अपनी विधियाँ होती हैं। आइए hide और show विधियों से शुरुआत करें। hide और show विधियाँ तत्वों को छिपाने और दिखाने की अनुमति देती हैं। आइए इनके काम करने के तरीके को देखें।

शुरुआत के लिए निम्नलिखित HTML कोड लेते हैं:

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

CSS कोड इस तरह दिखता है:

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

अब Javascript कोड लिखते हैं, जिसके अनुसार बटन #hide पर क्लिक करने पर तत्व छिप जाएगा, और बटन #show पर क्लिक करने पर - दिखाई देगा:

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

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

प्रभाव के निष्पादन का समय मिलीसेकंड में निर्धारित किया जा सकता है (1000 मिलीसेकंड = 1 सेकंड)। इस स्थिति में, प्रभाव निर्धारित समय के दौरान धीरे-धीरे चलेगा। आइए प्रभाव के निष्पादन का समय 1 सेकंड निर्धारित करें और देखें कि प्रभाव कैसे बदलता है:

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

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

मarkup दिया गया है:

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

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

ऐसा करें कि #hide वाले लिंक पर क्लिक करने पर सूची वाला डिव, छिप जाए, और #show वाले लिंक पर दिखाई दे। प्रत्येक प्रभाव के लिए निष्पादन का समय 600ms में निर्धारित करें।