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:
