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:
When the all the effects are finished:
Leave a Reply