# fadeIn
The jQuery **`fadeIn()` method** is used to fade in a hidden element.
## Syntax
```
$(selector).fadeIn(speed, callback);
```
1. **`speed`** is an optional parameter used to specify the duration of any applied effect. It can take on values such as "slow", "fast", or any other specified integer value of speed (in milliseconds).

2. **`callback`** is another optional parameter that refers to a function that a user may want to execute at the end of fading.  

# fadeOut

The jQuery **`fadeOut()` method** is used to fade out a visible element.

## Syntax
```
$(selector).fadeOut(speed, callback);
```
1. **`speed`** is an optional parameter used to specify the duration of any applied effect. It can take on values such as "slow", "fast", or any other specified integer value of speed (in milliseconds).

2. **`callback`** is another optional parameter that refers to a function a user may want to execute at the end of fading.  

# Example

Let's visualize the workings of `fadeIn()` and `fadeOut()`:



<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(200);
  });
});

$(document).ready(function(){
  $("#bt1").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(2000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<p>fadeIn will show colour boxes on screen. fadeOut will clear them.</p>
 
<button id = "bt1">fadeIn</button><br><br>
<button id = "btn">fadeOut</button><br><br>

<div id="div1" style="width:60px;height:80px;display:none;background-color:yellow;"></div><br>
<div id="div2" style="width:60px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:60px;height:80px;display:none;background-color:orange;"></div>

</body>
</html>

codemirror

How to fade an element in and out using jQuery

Use jQuery's fadeIn() and fadeOut() methods to fade elements with optional speed and callback parameters for custom durations and functions.