jQuery Fade

The fadeIn(), fadeOut(), and fadeToggle() methods are used to create fading effects on elements.
They are built-in functions and can be used easily.

fadeIn() Method

Used to gradually make selected elements visible.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery FadeIn Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: blue;
      display: none; /* Initially hide the paragraph */
    }
  </style>
</head>
<body>

  <button id="fadeInBtn">Fade In Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Fade in the paragraph on button click
      $("#fadeInBtn").click(function(){
        $("#myParagraph").fadeIn();
      });
    });
  </script>

</body>
</html>

fadeOut() Method

Used to gradually hide selected elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery FadeOut Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: red;
    }
  </style>
</head>
<body>

  <button id="fadeOutBtn">Fade Out Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Fade out the paragraph on button click
      $("#fadeOutBtn").click(function(){
        $("#myParagraph").fadeOut();
      });
    });
  </script>

</body>
</html>

fadeToggle() Method

Used to toggle between fading in and fading out of selected elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery FadeToggle Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: green;
    }
  </style>
</head>
<body>

  <button id="fadeToggleBtn">Fade Toggle Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Toggle between fading in and fading out the paragraph on button click
      $("#fadeToggleBtn").click(function(){
        $("#myParagraph").fadeToggle();
      });
    });
  </script>

</body>
</html>

Quick Recap - Topics Covered

jQuery Fade

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message