jQuery fadein() effect is used to make an html element appear gradually on the screen. This method also accepts speed and callback function as optional parameters that can help us adjust the fade in speed and run a callback function when the fadein effect is complete.
jQuery fadeIn() syntax
selector.fadeIn( speed, [callback] );
selector: It is used to select a single or multiple html elements on which this fade in effect can be applied. To read more about selectors refer this guide: Selectors in jQuery.
speed: The speed is an optional parameter, fade in speed in milliseconds or in values such as “slow” or “fast”.
callback: callback function that executes when the fadein effect is complete. It is an optional parameter.
jQuery fadeIn() Example
In the following example we have one paragraph and we have set the display to none for this paragraph. On the button click event, we are fading in this paragraph using fadeIn() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<h2>jQuery fadein effect example</h2>
<p style="display:none;">This tutorial is published on beginnersbook.com. This
paragraph will appear when the FadeIn button is clicked.</p>
<button>FadeIn</button>
</body>
</html>
Output:
Before FadeIn button is clicked:
After FadeIn button is clicked:
jQuery fadeIn() Example with speed parameter
As mentioned in the fadeIn() syntax, we can pass the speed for fadein effect in milliseconds. Alternatively we are allowed to pass string values such as “slow” and “fast” for slow and fast fading in effects.
$(document).ready(function(){
$("button").click(function(){
$("p").fadeIn(2000);
});
});
jQuery fadeIn() Example with callback function parameter
In the callback function we are passing an alert message when the fadein effect is complete. We have taken the same example that we have seen above. We have just changed the script part in the example.
$(document).ready(function(){
$("button").click(function(){
$("p").fadeIn("slow", function(){
alert("The paragraph is now visible");
});
});
});
Output: The output screen looks like this when the fadein effect is complete.
Leave a Reply