BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

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()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap