Fading इफेक्ट्स

fadeIn धीरे-धीरे किसी hidden element को visible बनाता है।

In this page:

fadeIn()
fadeOut()
fadeToggle()
fadeTo()
Fade Speed

Syntax

javascript

$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, opacity, callback);

fadeIn()

fadeIn() किसी hidden element की opacity को एक चुनी गई duration में 0 से 1 तक animate करके इसे reveal करता है। यह सिर्फ transparency को असर करता है, इसलिए element का size और position पूरी animation के दौरान fixed रहते हैं।

उदाहरण: fadeIn()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box" style="display:none">Fading in</div>
    <button id="btn">Fade In</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#output").text("Fading in...");
        $("#box").fadeIn(1000, function() {
          $("#output").text("Fade in complete");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).hide();
        $("#output").text("");
      });
    </script>
  </body>
</html>

fadeOut()

fadeOut() इसका उल्टा animation चलाता है, किसी element की opacity को धीरे-धीरे 0 तक कम करता है और फिर fade पूरा होने पर display:none set करता है, इसे layout से हटाते हुए। क्योंकि element को बाद में display:none set किया जाता है, यह सिर्फ invisible नहीं बल्कि page के layout flow से पूरी तरह हटा दिया जाता है।

उदाहरण: fadeOut()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Fading out</div>
    <button id="btn">Fade Out</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#output").text("Fading out...");
        $("#box").fadeOut(1000, function() {
          $("#output").text("Fade out complete");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

fadeToggle()

fadeToggle() check करता है कि कोई element इस समय visible है या faded out, और इसे opposite state में animate कर देता है, आपको एक single call देते हुए जो दोनों directions के लिए काम करती है। यह एक सुविधाजनक shortcut है जब आप किसी method को call करने का फ़ैसला लेने से पहले किसी element की current visibility state खुद track नहीं करना चाहते।

उदाहरण: fadeToggle()

javascript

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    #box { 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="box">Toggle fade</div>
    <button id="btn">Fade</button>
    <div id="output"></div>

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

    function init() {
      $("#btn").on("click", function() {
        $("#box").fadeToggle(function() {
          $("#output").text($(this).is(":visible") ? "Box faded in" : "Box faded out");
        });
      });
    }
    init();

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

fadeTo()

fadeTo() किसी element को आपकी चुनी हुई एक specific opacity value पर animate करता है, जैसे 0.5, हमेशा पूरी तरह 0 या 1 तक जाने के बजाय -- एक dimmed या semi-transparent effect के लिए उपयोगी। यह simple fade in या out से ज़्यादा fine control देता है, dimmed overlay या एक subtle hover effect बनाने के लिए उपयोगी।

उदाहरण: fadeTo()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Dimmed content</div>
    <button id="btn">Fade To 0.5</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#box").fadeTo(1000, 0.5, function() {
          $("#output").text("Opacity is now " + $(this).css("opacity"));
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true).css("opacity", 1);
        $("#output").text("");
      });
    </script>
  </body>
</html>

Fade Speed

हर fading method एक duration argument accept करता है -- या तो milliseconds या slow या fast जैसा keyword -- control करते हुए कि opacity transition पूरा होने में कितना समय लगता है। आप एक second argument के रूप में एक callback function भी pass कर सकते हैं, जो fade animation खत्म होते ही automatically चलता है।

उदाहरण: Fade Speed

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Content</div>
    <button id="btn">Fade Out</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#box").fadeOut("slow", function() {
          $("#output").text("Fade complete");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").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 Showing and Hiding Elements Next Lesson → Sliding Effects

Fading इफेक्ट्स

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

Fade Speed

Chapter Quiz — Complete all 9 topics to unlock

Login to run this code