jQuery slideUp()
jQuery Tutorial » jQuery slideUp()
What is, to slideUp() in jQuery?
SlideUp() jQuery method hides all matched items by adjusting their height and firing an optional callback after completion.
Syntax:
$(selector).slideUp(speed,callback);
$(selector).slideUp();
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 to call once the animation is complete..
jQuery slideUp() without any parameter
When the slideUp() jQuery method is used without any input value as speed and callback, it takes the default value for animation effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery | slideup() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<body style = "text-align:center;">
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("h2").slideUp();
});
});
</script>
<h1 style = "color:green;" >Agernic.com jQuery tutorial</h1>
<button class="btn1" style="padding:10px 20px; color:#EAEAEA; background:#039">click me to SlideUp()</button>
<h2>1. jQuery | slideup() Method</h2>
<h2>2. jQuery | slideup() Method</h2>
</body>
</html>
Related subjects:
jQuery fadeout
Effects hide / show
jQuery selectors
Tags: jQuery slideUp slideDown, callback, animation, slidedown toggle, function, easing, vanilla js, is not a function,
What is, to slideUp in jQuery?
slideUp With Duration Parameter - Example
slideup) 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 2000 milliseconds and 6000 milliseconds respectively. For example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery | slideup() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<body style = "text-align:center;">
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("h2").slideUp(2000);
});
});
</script>
<h1 style = "color:green;" >Agernic.com jQuery tutorial</h1>
<button class="btn1" style="padding:10px 20px; color:#EAEAEA; background:#039">click me to SlideUp()</button>
<h2>1. jQuery | slideup() Method With Duration Parameter</h2>
<h2>2. jQuery | slideup() Method With Duration Parameter</h2>
</body>
</html>
Various ways with duration parameter for using slideup() are discussed in the above example.
slideUp animation
This article is about jQuery's in-built method slideUp(). We seen its functionality and how we can use it in our web pages.
jQuery slideUp slideDown, callback, animation, slidedown toggle, function, easing, vanilla js, is not a function,
What is, to slideUp in jQuery?
JQuery slideUp() - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.