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 Sliding Effects

By Chaitanya Singh | Filed Under: jQuery

There are three useful methods in jQuery to slide selected elements up and down. These methods are slideDown(), slideUp() and slideToggle(). In this guide, we will discuss these three methods briefly as I have covered each of them in detail in separate tutorials, I will also provide links to those tutorials here in this article.

jQuery sliding methods

1. jQuery slideDown()
2. jQuery slideUp()
3. jQuery slideToggle()

1. jQuery slideDown()

jQuery slideDown() method is used to make the selected element appear gradually on an html page with the slide down effect.

For example, in this code we have assigned an id “para” to a paragraph and we have initially set the display of that paragraph to none. On the click on h2 element, the paragraph appear on the screen with a slide down effect.

To check out the complete example and more details about slideDown() method refer this guide: jQuery slideDown()

$(document).ready(function(){
  $("h2").click(function(){
    $("#para").slideDown("slow");
  });
});

2. jQuery slideUp()

jQuery slideUp() method is used to gradually disappear selected html element with a slide up effect.

In the following piece of jQuery code we are hiding a paragraph with id “para” on the click of h2 element. The paragraph gets hidden with a slide up effect.

To check out the complete example and more details about slideUp() method refer this guide: jQuery slideUp()

$(document).ready(function(){
  $("h2").click(function(){
    $("#para").slideUp("slow");
  });
});

3. jQuery slideToggle()

jQuery slideToggle() method toggles between slideDown() and slideUp() effects. If the selected html elements are slid down then slideToggle() method will slide them up and if the selected html elements are slid up then this method will slide them down.

For example, In the following code, we are sliding up and down a paragraph on the click of h2 element.

To check out the complete example and more details about slideToggle() method refer this guide: jQuery slideToggle()

$(document).ready(function(){
  $("h2").click(function(){
    $("p").slideToggle();
  });
});
❮ 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