jQuery Tutorial
In jQuery, slideUp method is used to hide or invisible the selected elements in the web page.
jquery slideUp syntax
$(selector).slideUp()
$(selector).slideUp(speed of animation, easing, callback function)
In jQuery all the three parameters are optional for slideUp method.
"fast" - hides the element faster.
"normal" - hides the element in normal.
"slow" - hides the element slower.
milliseconds - hides 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.
This jQuery code is used to hide all the div elements in the page and displays the alert message 'Slide up method is completed testing!' once hidden the div element.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery slideUp method</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnSlideUp').click(function () { $("div").slideUp(15000, "swing", function () { alert("Slide up method is completed testing!") }); }); }); </script> </head> <body> <input type="button" id="btnSlideUp" value="Slide Up"/> <div style="height:200px;width:200px;background-color:blue;color:white;"> div element slide up testing! </div> </body> </html>Output:
div element
Hides div after clicking on Fade Out button
callback function is used to display the alert message once hidden when clicking on Slide Up button.
$(document).ready(function () { $('#btnSlideUp').click(function () { $("div").slideUp(function () { alert('call back function!'); }); }); });
Hides the div element for 10000 milliseconds, animation mode is swing (In middle of animation is faster) and callback function is used to display alert message once div element is hidden.
$(document).ready(function () { $('#btnSlideUp').click(function () { $("div").slideUp(10000,"swing", function () { alert('slideUp example!') }); }); });« Previous Next »
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page