Sliding इफेक्ट्स

slideDown एक sliding motion से किसी hidden element को reveal करता है।

In this page:

slideDown()
slideUp()
slideToggle()
Sliding Menus
Slide Speed

Syntax

javascript

$(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()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #panel { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="panel" style="display:none">Panel content</div>
    <button id="btn">Slide Down</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#panel").slideDown(function() {
          $("#output").text("Panel slid down");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#panel").stop(true, true).hide();
        $("#output").text("");
      });
    </script>
  </body>
</html>

slideUp()

slideUp() इसका उल्टा animation चलाता है, किसी element की height को 0 तक shrink करके फिर इसे hide करता है, content को ऊपर की तरफ़ collapse होने का visual effect देते हुए।

उदाहरण: slideUp()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #panel { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="panel">Panel content</div>
    <button id="btn">Slide Up</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#panel").slideUp(function() {
          $("#output").text("Panel slid up");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#panel").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

slideToggle()

slideToggle() किसी element की current state check करता है और इसे opposite state में animate करता है, एक single call से किसी collapsed element को expand या किसी expanded element को collapse करते हुए।

उदाहरण: slideToggle()

javascript

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    #panel { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
    </style>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="panel">Panel content</div>
    <button id="btn">Toggle</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() {
        $("#panel").slideToggle(function() {
          $("#output").text($(this).is(":visible") ? "Panel slid down" : "Panel slid up");
        });
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Sliding Menus

Sliding effects accordions, dropdown menus, और expandable panels के लिए एक natural fit हैं, क्योंकि height animation visually बताता है कि content reveal हो रहा है या tuck away हो रहा है, सिर्फ appear होने के बजाय।

उदाहरण: Sliding Menus

javascript

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    #dropdown, #menuBtn { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
    #dropdown { list-style-position: inside; }
    #menuBtn { background: none; color: inherit; }
    </style>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="menuBtn">Menu</button>
    <ul id="dropdown" style="display:none"><li>Item 1</li><li>Item 2</li></ul>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#menuBtn").on("click", function() {
        $("#dropdown").slideToggle(function() {
          $("#output").text($(this).is(":visible") ? "Menu open" : "Menu closed");
        });
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Slide Speed

दूसरे jQuery effect methods की तरह ही, sliding methods milliseconds में एक duration या slow जैसा keyword accept करते हैं, आपको control करने देते हुए कि expand या collapse motion कितनी जल्दी play होती है।

उदाहरण: Slide Speed

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #panel { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="panel">Content</div>
    <button id="btn">Slide Up Slowly</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#output").text("Sliding up...");
        $("#panel").slideUp("slow", function() {
          $("#output").text("Slide complete");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#panel").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson Fading Effects Next Lesson → Custom Animations with animate()

Sliding इफेक्ट्स

slideDown()

slideUp()

slideToggle()

Sliding Menus

Slide Speed

Chapter Quiz — Complete all 9 topics to unlock

Login to run this code