Chaining effects
jQuery allows us to chain the different effect functions onto a single selected element. This allows us to easily perform multiple effects in a sequential order.
How to do it…
Learn to use a powerful feature of jQuery to write better code by performing the following steps:
Create a blank HTML file named
recipe-6.html
and save it to an easily accessible location on your computer. Add the following HTML code to this file, ensuring to update the reference to the jQuery library:<!DOCTYPE html> <html> <head> <title>Chapter 4 :: JQuery Effects :: Recipe 6</title> <script src="jquery.min.js"></script> <script src="recipe-6.js"></script> <link type="text/css" media="screen" rel="stylesheet" href="recipe-6.css" /> </head> <body> <button id="start">Start</button> <div class="box"></div> </body> </html>
Create a CSS file named
recipe-6.css
and add the following code:...