- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
jQuery - fadeOut( speed, [callback] ) Method
Description
The fadeOut( ) method fades out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
Syntax
Here is the simple syntax to use this method −
selector.fadeOut( speed, [callback] );
Parameters
Here is the description of all the parameters used by this method −
speed − A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This is optional parameter representing a function to call once the animation is complete.
Example
Following is a simple example a simple showing the usage of this method −
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("#in").click(function(){ $(".target").fadeIn( 'slow', function(){ $(".log").text('Fade In Transition Complete'); }); }); $("#out").click(function(){ $(".target").fadeOut( 'slow', function(){ $(".log").text('Fade Out Transition Complete'); }); }); }); </script> <style> p {background-color:#bca; width:200px; border:1px solid green;} </style> </head> <body> <p>Click on any of the buttons</p> <button id = "out"> Fade Out </button> <button id = "in"> Fade In</button> <div class = "target"> <img src = "../images/jquery.jpg" alt = "jQuery" /> </div> <div class = "log"></div> </body> </html>
This will produce following result −
jquery-effects.htm
Advertisements
To Continue Learning Please Login
Login with Google