Online Web Development Tutorials

jQuery fadeOut() method is used to hide the matched elements by fading them to transparent..

Below the syntax of jquery fadeOut() method

.fadeOut(duration[,easing][,complete])

- duration (default: 400)
- Type: Number or String
- A string or number determining how long the animation will run.

- easing (default: swing)
- Type: String
- A string indicating which easing function to use for the transition.

- complete
- Type: Function()
- A function to call once the animation is complete, called once per matched element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery fadeOut()</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#fadeout").click(function() {
     $("p").fadeOut();
  });
});
</script>
</head>
<body>
 <p>jQuery is a lightweight, "write less, do more", JavaScript library. This tutorial will help you to learn jQuery selectors, effects, traversing, animation, attributes and more. The purpose of jQuery is to make it much easier to use JavaScript on your website. It is free, open-source software using the permissive MIT License. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation..</p>
<button class="btn" id="fadeout">fadeOut</button>
 </body>
</html>

JQuery Fadeout()