# 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

fadeIn The jQuery fadeIn() method is used to fade in a hidden element. Syntax $(selector).fadeIn(speed, callback);    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).   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);    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).   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(): 