If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
Element slide करने के लिए jQuery ने 3 methods provide किये हैं जिनकी help से हम आसानी से की भी Element slide कर सकते हैं।
slideDown() function का use किसी भी hidden element को slide down करके appear करता है। बाकी effects function की तरह ही इसमें भी दो arguments pass किये जाते हैं।
speed : यह milliseconds में time accept करता है , दिए गए time के according ही element hide होता है। अगर time pass नहीं किया गया तो element instant hide हो जायगा।speed value में हम "slow", "fast", or milliseconds time दे सकते हैं।
callback : यह callback function होता है , जो कि element को hide करने के बाद run होता है। JS Callback Functions
File : jquery_dlideDown.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Slide Down Example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- add style -->
<style>
#slideDown_elm, #slideDown_div {
padding: 5px;
text-align: center;
background-color: #a7e2cc;
border: solid 1px #c3c3c3;
}
#slideDown_elm {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="slideDown_div">Click to slide down panel</div>
<div id="slideDown_elm">Hello world!</div>
<script>
$(document).ready(function(){
$("#slideDown_div").click(function(){
$("#slideDown_elm").slideDown("slow");
});
});
</script>
</body>
</html>Click to slide down panelHello world!
slideUp() function का use किसी भी element को slide up करके disappear(hide) करता है।
File : jquery_slideUp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Slide Up Example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- add style -->
<style>
#slideUp_elm, #slideUp_div {
padding: 5px;
text-align: center;
background-color: #a7e2cc;
border: solid 1px #c3c3c3;
}
#slideUp_elm {
padding: 25px;
}
</style>
</head>
<body>
<div id="slideUp_div">Click to slide up panel</div>
<div id="slideUp_elm">please ! Slide up</div>
<script>
$(document).ready(function(){
//slide Up
$("#slideUp_div").click(function(){
$("#slideUp_elm").slideUp("slow");
});
});
</script>
</body>
</html>Click to slide up panelplease ! Slide up
slideToggle() function , slideDown() और slideUp() function के बीच toggle करता है , means अगर element पहले से slide down है तो उसे slideUp() करेगा और अगर element slide Up है तो उसे slideDown कर देगा।
File : jquery_slideToggle.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Slide Toggle Example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- add style -->
<style>
#slideToggle_elm, #slideToggle_div {
padding: 5px;
text-align: center;
background-color: #a7e2cc;
border: solid 1px #c3c3c3;
}
#slideToggle_elm {
padding: 25px;
}
</style>
</head>
<body>
<div id="slideToggle_div">Double Click to slide toggle panel</div>
<div id="slideToggle_elm">slideToggle</div>
<script>
$(document).ready(function(){
//slide Up
$("#slideToggle_div").click(function(){
$("#slideToggle_elm").slideToggle("slow");
});
});
</script>
</body>
</html>Double Click to slide toggle panelslideToggle