jQuery Tutorial
In jQuery, show method is used to show the selected elements.
jquery show syntax
$(selector).show(speed of animation, easing, callback function)
In jQuery all the three parameters are optional for show 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 show method</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnShow').click(function () { $("div").show(); }); }); </script> </head> <body> <input type="button" id="btnShow" value="Show"/> <div style="height:200px;width:200px;background-color:blue;color:white;display:none;"> This hidden div will be shown! </div> </body> </html>Output:
Hidden div element
Shows div after clicking on show button
call back function is used to update the hidden div text when shows on clicking of show button.
$(document).ready(function () { $('#btnShow').click(function () { $("div").show(function () { $(this).text('call back function!'); }); }); });
jquery show function is used to show the div element with slow animation .
$(document).ready(function () { $('#btnShow').click(function () { $("div").show("slow"); }); });
jquery show function is used to show the hidden element with animation slower for 15000 milliseconds.
$(document).ready(function () { $('#btnShow').click(function () { $("div").show(15000); }); });
jquery show function is used to show the hidden element with animation slower for 15000 milliseconds with consistent speed.
$(document).ready(function () { $('#btnShow').click(function () { $("div").show("normal", "linear"); }); });
css method is also used to show the hidden element.
$(document).ready(function () { $('#btnShow').click(function () { $("div").css("display", "block"); }); });« Previous Next »
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page