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
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
