Sliding Effects
In this page:
$(selector).slideDown(speed, callback);
$(selector).slideUp(speed, callback);
$(selector).slideToggle(speed, callback);slideDown()
slideDown() किसी hidden element की height को 0 से उसकी natural height तक animate करके इसे reveal करता है। यह किसी collapsed panel या dropdown को view में expand करने के लिए सबसे ज़्यादा इस्तेमाल होने वाला effect method है।
उदाहरण: slideDown()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="panel" style="display:none">Panel content</div>
<script>
$("#panel").slideDown();
</script>
</body>
</html>slideUp()
slideUp() इसका उल्टा animation चलाता है, किसी element की height को 0 तक shrink करके फिर इसे hide करता है, content को ऊपर की तरफ़ collapse होने का visual effect देते हुए।
उदाहरण: slideUp()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="panel">Panel content</div>
<script>
$("#panel").slideUp();
</script>
</body>
</html>slideToggle()
slideToggle() किसी element की current state check करता है और इसे opposite state में animate करता है, एक single call से किसी collapsed element को expand या किसी expanded element को collapse करते हुए।
उदाहरण: slideToggle()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="panel">Panel content</div>
<button id="btn">Toggle</button>
<script>
$("#btn").on("click", function() {
$("#panel").slideToggle();
});
</script>
</body>
</html>Sliding Menus
Sliding effects accordions, dropdown menus, और expandable panels के लिए एक natural fit हैं, क्योंकि height animation visually बताता है कि content reveal हो रहा है या tuck away हो रहा है, सिर्फ appear होने के बजाय।
उदाहरण: Sliding Menus
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="menuBtn">Menu</button>
<ul id="dropdown" style="display:none"><li>Item 1</li><li>Item 2</li></ul>
<script>
$("#menuBtn").on("click", function() {
$("#dropdown").slideToggle();
});
</script>
</body>
</html>Slide Speed
दूसरे jQuery effect methods की तरह ही, sliding methods milliseconds में एक duration या slow जैसा keyword accept करते हैं, आपको control करने देते हुए कि expand या collapse motion कितनी जल्दी play होती है।
उदाहरण: Slide Speed
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="panel">Content</div>
<script>
$("#panel").slideUp("slow");
</script>
</body>
</html>- पहले से visible किसी element पर
.slideDown()call करना और एक visible animation की उम्मीद करना, जबकि यह सिर्फ hidden से shown तक animate करता है। .slideUp()इस्तेमाल करना और फिर उम्मीद करना कि element फिर भी जगह occupy करता रहेगा, जबकि यहdisplay:noneके साथ खत्म होता है।- sliding element को fixed
paddingयाmarginissues देना और आख़िर में एक jump देखना; एक wrapper<div>को animate करना ज़्यादा smooth है।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: