Hello Readers,
jquery fadeIn is the jquery method which is used to fade the hidden element or the jquery matched element.
Syntax :
$(selector).fadeIn(speed,callback);
Parameters :
Speed : this is a optional parameter which specifies the duration of the effect.
Callback : it is also a optional parameter and executed after the fading completes.
For Example :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:20px;height:20px;display:none;background-color:pink;"></div><br>
<div id="div2" style="width:20px;height:20px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:20px;height:20px;display:none;background-color:blue;"></div>
</body>
</html>
In the above code, we use the fadeIn() method with it's optional parameters (speed and callback function)
0 Comment(s)