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
    • Learn jQuery
  • Core Java
  • OOPs
  • Collections
  • Java I/O
  • JSON
  • DBMS

jQuery – Chaining multiple effects

By Chaitanya Singh | Filed Under: jQuery

In jQuery we can chain multiple effects together in a single line. For example $("p").slideDown().slideUp() this will make the paragraph appear with a slide down effect and then disappear the paragraph with a slide up effect.

In this guide, we will learn how to chain multiple jQuery effects together in a single line.

jQuery chaining example

Here we are chaining two effects together, the slideDown() effect and the slideUp() effect in a single line. This will make the paragraph appear and then disappear with a slide down and slide up effects respectively.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideDown(5000).css("font-size", "1.5em").slideUp(5000);
  });
});
</script>
</head>
<body>

<h2>jQuery chaning example</h2>
<p style="display:none">This example is published on beginnersbook.com. This para
will appear when you click on the Show Me! button with an increased font size.</p>
<button>Show Me!</button>
</body>
</html>

Output:
When Show Me! button is clicked and the slideDown() effect is finished but slideUp() is not yet started:
jQuery chaining
When the all the effects are finished:
jQuery chaining example

❮ 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 – 2022 BeginnersBook . Privacy Policy . Sitemap