beginnersbook.com

  • Home
  • All Tutorials
    • Learn Servlet
    • Learn JSP
    • Learn JSTL
    • Learn C
    • Learn C++
    • Learn MongoDB
    • Learn XML
    • Learn Python
    • Learn Perl
    • Learn Kotlin
  • Core Java
  • OOPs
  • Collections
  • Java I/O
  • JSON
  • DBMS

jQuery slideUp()

By Chaitanya Singh | Filed Under: jQuery

jQuery slideUp() method is used to gradually disappear an html element with a slide up effect. You can think of it as a reverse of slideDown() method.

jQuery slideUp() Syntax

$(selector).slideUp(speed, callback_function);

$(selector): This is used to select the html element on which this slide up effect is being applied.

speed: To adjust the speed of the slide up effect. It can be in milliseconds or “slow” or “fast”.

callback_function: Optional parameter. It is a function that is passed as an argument to the slideUp() method, it executes when the slide up effect is complete.

jQuery slideUp() Example

In the following example, we are using the slide up effect on the paragraph. The paragraph is selected using jQuery id selector and we are calling a slideUp() method on this selector to make the paragraph disappear. All this is done inside h2 click function so this slide up effect takes place when we click on the h2 heading.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").click(function(){
    $("#para").slideUp("slow");
  });
});
</script>
</head>
<body>

<h2>jQuery slideUp effect example, Click here</h2>
<p id = "para">This tutorial is published on beginnersbook.com. This
paragraph will disappear with a slide up effect once we click on the
h2 heading.</p>
</body>
</html>

Output:
Before h2 heading is clicked:
jQuery slideUp
After h2 heading is clicked:
jQuery slideUp effect example

jQuery slideUp() method with speed and callback parameters

You can define a callback function as a parameter. Here we are making changes in the example that we have seen above, we have just defined a callback function as a slideUp() method parameter to display an alert message when the slide up effect is complete.

$(document).ready(function(){
  $("h2").click(function(){
    $("#para").slideUp("slow", function(){
      alert("The paragraph is not visible now");
    });
  });
});

Output:
jQuery slideUp speed callback parameters

❮ PreviousNext ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()

Recently Added..

  • JSON Tutorial
  • Java Regular Expressions Tutorial
  • Java Enum Tutorial
  • Java Annotations Tutorial

Copyright © 2012 – 2021 BeginnersBook . Privacy Policy . Sitemap