jQuery FadeIn Animation Example

jQuery FadeIn () Animation effect method; Through this tutorial, i will show you what is fadeIn() animation effect method in jQuery and how to use this method with html elements .

jQuery FadeIn Animation Effect

FadeIn () method is used to fade in a hidden selected html elements using the animation method.

Syntax jQuery FadeIn Animation Effect

 $(selector).fadeIn();  
$(selector).fadeIn(speed, callback);
$(selector).fadeIn(speed, easing, callback);

Parameters of jQuery FadeIn Animation Effect

  • speed :- The argument ‘speed‘ determines the duration of this effect. Its possible vales are slow, fast and milliseconds.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- This is an optional parameter. you can specify what to do after the fadeIn() method is called.

Example 1 – jQuery FadeIn Animation Effect

See the jQuery fadeIn() method effect; as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery FadeIn Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#first").fadeIn();  
        $("#second").fadeIn("slow");  
        $("#third").fadeIn(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeIn() method example with different parameters.</p>  
<button>Click here for fade In</button><br><br>  
<div id="first" style="width:100px;height:100px;display:none;background-color:yellow;"></div><br>  
<div id="second" style="width:100px;height:100px;display:none;background-color:red;"></div><br>  
<div id="third" style="width:100px;height:100px;display:none;background-color:green;"></div>  
</body>  
</html>   

Recommended jQuery Tutorials

Leave a Comment