AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery slideUp()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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, easing, callback );
$(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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...