BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery fadeOut() Effect

Last Updated: April 24, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery fadeOut() method is used to fade out the selected elements of the html page. It changes the opacity of the selected element to 0 (zero) and then changes the display to none for that element. In this guide, you will learn jQuery fadeOut() effect with examples.

jQuery fadeOut() Syntax

selector.fadeOut( speed, callback_function);

selector: It is used to select the html element on which this fade out effect is being applied.

speed: The speed of the fadeout effect in milliseconds. It is an optional parameter and can take values such as “slow” or “fast” or in milliseconds.

callback_function: It is also an optional parameter. This callback function executes when the fade out effect is complete. You can use this to set alert or display a message on the screen when fadeout effect is complete.

jQuery fadeOut() Effect Example

In the following example we are applying the fadeOut effect on the paragraphs by using paragraph selector ($(“p”)), we are calling the fadeOut() method inside button click function which means when the FadeOut button is clicked, the paragraph will fadeout as you can see in the output.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut();
  });
});
</script>
</head>
<body>

<h2>jQuery fadeOut effect example</h2>
<p>This tutorial is published on beginnersbook.com. This
paragraph will gradually fadeout when the FadeOut button is clicked.</p>
<button>FadeOut</button>
</body>
</html>

Output:
Before FadeOut button is clicked:
jQuery fadeOut
After FadeOut button is clicked:
jQuery fadeOut() Effect example

jQuery fadeOut() Effect Example with speed parameter

Speed can be specified in milliseconds. For example, here we have specified 2500 milliseconds speed for the fadeout effect.

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut(2500);
  });
});

Or you can specify the speed as “slow” or “fast” as shown below.

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut("slow");
  });
});

jQuery fadeOut() Effect Example with speed and callback parameters

Lets take the first example and change the jQuery part. We are setting up an alert message in the callback function so that an alert message is displayed when the paragraph fades out.

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut("slow", function(){
      alert("The paragraph is now hidden");
    });
  });
});

Output:
jQuery fadeOut() with speed and callback function parameters

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery toggle() Effect
  3. jQuery fadeIn() Effect
  4. jQuery – Chaining multiple effects
  5. jQuery Effects – Show and Hide

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap