jQuery Tutorial
In jQuery, fadeIn method is used to change the opacity of the selected elements from hidden to visible in the web page.
jquery fadeIn syntax
$(selector).fadeIn(speed of animation, easing, callback function)
In jQuery all the three parameters are optional for fadeIn method.
"fast" - shows the element faster.
"normal" - shows the element in normal.
"slow" - shows the element slower.
milliseconds - shows the element animation as based on specified milliseconds.
"swing" - In middle of the animation is faster but slower in beginning and end of animation.
"linear" - Animation is consistent from beginning to end.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery fadeIn method</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnFadeIn').click(function () { $("div").fadeIn(10000,"swing", function () { alert('fadeIn example!'); }); }); }); </script> </head> <body> <input type="button" id="btnFadeIn" value="Fade In"/> <div style="height:200px;width:200px;background-color:blue;color:white;display:none;"> This div will be fade In! </div> </body> </html>Output:
Hidden div element
Hides div after clicking on Fade Out button
callback function is used to display the alert message when clicking on Fade In button.
$(document).ready(function () { $('#btnFadeIn').click(function () { $("div").fadeIn(function () { alert('call back function!'); }); }); });
shows the div element with opacity changes for 10000 milliseconds, animation mode is swing (In middle of animation is faster) and callback function is used to display alert message after displayed from hidden div.
$(document).ready(function () { $('#btnFadeIn').click(function () { $("div").fadeIn(10000,"swing", function () { alert('fadeIn example!') }); }); });« Previous Next »
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page