AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery fadeIn()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

jQuery Tutorial » jQuery fadeIn()

What is fadeIn in jQuery?

The Method fadeIn() in jQuery is used to change opacity of selected item from hidden to visible. Hidden elements will not be display.

The jQuery fadeIn() method is used to fade in a hidden item.

Syntax:

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

The optional speed parameter specifies the duration of the effect and may have the following values as "slow", "fast" or milliseconds.

The next callback parameter which can also be optional and is a function that is executed after the fading is completed.

 

jQuery fadeIn() without any parameter

When the fadeIn() jQuery method is used without any input value as speed and callback, it takes the default value for the fading effect.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut();
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body style="background-color: #E1E1E1">
<h3>Using jQuery method "fadeIn()" without any parameter:</h3>
<p style="font-family:Arial, Helvetica, sans-serif;display:none; background:#9F9; padding:10px 20px">after click "Fade In" button -this paragraph is appeared after </p>

<button class="btn2">Fade in</button>
<button class="btn1">Fade out</button></div>
</body>
</html>

fadeIn() method is added in jQuery version 1.0 and gradually evolved incorporating various features

 

Related subjects:
jQuery Attributes Effects hide / show jQuery selectors

 

Tags: jQuery fadeIn() bot working, fade in on sceoll, fadein fadeout, display flex, delay, callback, fadeout toggle, function, is not a function, opacity, display none
What is fadeIn in jQuery?
What is the difference between show and fadeIn jQuery?
What is fadeIn in JavaScript?
What is fadeIn fadeOut in jQuery?

 

fadein() With Duration Parameter - Example

fadeIn() method can accepts the first input argument like duration parameter value meaning: for how long the effect would run.

duration any number can be given or just a keyword as: “slow” or “fast” can be used which is for 200 milliseconds and 600 milliseconds respectively. For example:

<!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(){
$("#div_a").fadeIn();
$("#div_b").fadeIn("slow");
$("#div_c").fadeIn(4000);
});
});
</script>
</head>
<body>

<p>FadeIn() demonstration with different parameters.</p>

<button style="padding:10px 20px; background:#0CF">Click to fade in boxes</button><br><br>

<div id="div_a" style="width:100px;height:60px;display:none;background-color:red;"></div><br>
<div id="div_b" style="width:100px;height:60px;display:none;background-color:green;"></div><br>
<div id="div_c" style="width:100px;height:60px;display:none;background-color:blue;"></div>

</body>
</html>

Various ways with duration parameter for using fadeIn() are discussed in the above example.

 

jQuery fadein with user parameter - Example

fadein() with user parameter lets the user decide how they like the speed of the effect.
The next code shown in the below example how is designed to have linear fadeIn() effect on element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(3000,"linear");
});
$(".btn2").click(function(){
$("p").fadeIn(3000,"linear");
});
});
</script>
</head>
<body style="background-color: #E5E5E5;">
<h3>Using "fadeIn()" method with user parameter:</h3>
<p style="font-family: Arial, Helvetica, sans-serif;display:none; background:#FF9">Click fadeout to see how This paragraph is disappears again in a linear speed<br />
,after the "Fade out" button is clicked </p>
<button class="btn2">Fade in</button>
<button class="btn1">Fade out</button>
</div>
</body>
</html>

 



jQuery fadeIn() bot working, fade in on sceoll, fadein fadeout, display flex, delay, callback, fadeout toggle, function, is not a function, opacity, display none
What is fadeIn in jQuery?
What is the difference between show and fadeIn jQuery?
What is fadeIn in JavaScript?
What is fadeIn fadeOut in jQuery?

JQuery fadeIn() - jquery

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.