---
title: "FadeIn effect in JQuery expain with eample?"  
description: "FadeIn effect in JQuery expain with eample?"  
author: "Ethan Karla"  
published: 2021-07-27  
canonical: https://answers.mindstick.com/qa/93792/fadein-effect-in-jquery-expain-with-eample  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 2 minutes  

---

# FadeIn effect in JQuery expain with eample?

FadeIn [effect](https://www.mindstick.com/interview/1501/name-some-of-the-methods-of-jquery-used-to-provide-effects) in JQuery expain with eample?

## Answers

### Answer by Ravi Vishwakarma

**JQuery fadeIn()** The jQuery fadeIn() method is used to fade in an element. If an object is to be made lighter, then do it.

```
Syntax:
$(selector).fadeIn();
$(selector).fadeIn(speed,callback);
```

> Speed and callback is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds. Callback function to be called after completion of fadeIn().

```
<!DOCTYPE html>
<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('#div1').fadeIn();
                $('#div2').fadeIn('slow');
                $('#div3').fadeIn(3000);
            });
        });
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            display: none;
            border-radius:25px;
            text-align:center;
            color:white;
        }
    </style>
</head>
<body>
    <button>Click to fade in boxes</button><br>
    <br>
    <div id='div1' style='background-color:black;'>
        black
    </div>
    <br>
    <div id='div2' style='background-color:blue;'>
        blue
    </div>
    <br>
    <div id='div3' style='background-color:red;'>
        red
    </div>
</body>
</html>
```

![FadeIn effect in JQuery expain with eample?](https://answers.mindstick.com/questionanswer/63a249a2-5c6f-4c01-b922-b2bee9d73fd8/images/c43d6654-aa53-48bd-b822-76676b8f4614.png)\


---

Original Source: https://answers.mindstick.com/qa/93792/fadein-effect-in-jquery-expain-with-eample

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
