Fading Effects

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>
  </head>
  <body>
    <div id="box" style="display:none">Fading in</div>
    <script>
      $("#box").fadeIn(1000);
    </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>
  </head>
  <body>
    <div id="box">Fading out</div>
    <script>
      $("#box").fadeOut(1000);
    </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>
  </head>
  <body>
    <div id="box">Toggle fade</div>
    <button id="btn">Fade</button>
    <script>
      $("#btn").on("click", function() {
      $("#box").fadeToggle();
      });
    </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>
  </head>
  <body>
    <div id="box">Dimmed content</div>
    <script>
      $("#box").fadeTo(1000, 0.5);
    </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>
  </head>
  <body>
    <div id="box">Content</div>
    <script>
      $("#box").fadeOut("slow", function() {
      console.log("Fade complete");
      });
    </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 Effects

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

Fade Speed

Chapter Quiz — Complete all 9 topics to unlock

Login to run this code