One of the great things about the modern web of today is that there are a lot of fantastic animations and effects on web pages and User Interfaces. Boring static text and lame images are gone, slick and engaging experiences are in. Having these effects can greatly add to the overall navigation, and often gives the user slick visual cues as to what is the next call to action and so on. It is important to use these animations and effects as a topping to the cake so to speak, we don’t want to overdo effects and confuse the user. I’m sure you have seen some websites that take the visual candy to an extreme, and often times, this adds no benefit and in fact may detract from the overall experience. With jQuery, we can create really cool animations and effects, sometimes with only a quick snippet of code. This is why you neeed to keep an eye on how much UI sugar you add, because jQuery makes it so easy to do! Once you have a few tricks up your sleeve, you may be tempted to apply an effect to every element you ever come across! Use Restraint Young Grapsshopper! If you use animations and effects correctly, they are going to be a truly awesome addition to your web page. So with that, let’s jump right into using jQuery to power our web pages with some awesome animation and effects!

jQuery Animation and Effects

jQuery provides some basic and very useful animation and effects to perform common actions right out of the box. Creating the effects that these methods provide in native JavaScript would be a time consuming and probably not all that fun exercise. These methods in jQuery however allow for things like showing and hiding elements, fading elements in and out, moving elements around on the screen, and more in a very straightforward way. It is also possible to create your own custom animations by using the .animate() method. Using the .animate() method is a bit more advanced though so instead let’s begin with some of the basic methods to get our feet wet.

Showing and Hiding Elements With jQuery

The various show and hide methods are a great place to start out when working with jQuery animations and effects. Showing and hiding elements is pretty easy and elements can be shown or hidden right away or over a given period of time. If you want to specify the speed, you can simply pass in a string of either ‘slow’, ‘normal’, or ‘fast’. If you’d rather be very specific, that is an option as well. Simply pass in a numeric value, and that value will be in milliseconds. So if you want something to take 5 seconds for example, use 5000. With just this small amount of input, you can create some nice results. This table lists the show and hide methods that are available to you.

Method Use Case show() Shows any elements in the wrapped set, if they are currently hidden show(speed, callback) By passing in the speed you can control the animation, and also trigger a callback function when complete hide() Hides any elements in the wrapped set, if they are currently being shown hide(speed, callback) You can also pass in a speed and callback to the hide method toggle() Toggles the visibility of any matched elements toggle(switch) Passing in true shows all elements while passing in false hides all elements toggle(speed, callback) Pass in a speed to control the animation and trigger a callback function when complete

Now that we have seen what some of these methods are in the table above, let’s put a few to use in some code to see how they actually work. Here is the raw HTML and jQuery that make the effect happen. We also have a working example so you can try out the effects for yourself.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 < ! doctype html > < html > < head > < meta charset = "utf-8" > < title > jQuery Event Handling < / title > < link rel = "stylesheet" href = "bootstrap/css/bootstrap.css" > < / head > < body class = "container" > < p > < / p > < div class = "btn btn-lg btn-info" id = "show" > Show < / div > < div class = "btn btn-lg btn-success" id = "hide" > Hide < / div > < div class = "btn btn-lg btn-warning" id = "toggle" > Toggle < / div > < p > < / p > < div id = "watch" class = "jumbotron alert-info" > < h2 > Click The Buttons Above and Watch Me ! < / h2 > < / div > < ! -- jQuery 1.11.1 ( latest non minified ) -- > <script src = "jquery-1.11.1.js" > </script> < ! -- Include all compiled plugins ( below ) , or include individual files as needed -- > <script src = "bootstrap/js/bootstrap.js" > </script> < ! -- custom written js -- > <script src = "tut.js" > </script> < / body > < / html >

1 2 3 4 5 6 7 8 9 10 11 12 13 jQuery ( document ) . ready ( function ( $ ) { jQuery ( '#show' ) . click ( function ( ) { jQuery ( '#watch' ) . show ( 'slow' ) ; } ) ; jQuery ( '#hide' ) . click ( function ( ) { jQuery ( '#watch' ) . hide ( 'normal' ) ; } ) ; jQuery ( '#toggle' ) . click ( function ( ) { jQuery ( '#watch' ) . toggle ( 'fast' ) ; } ) ; } ) ;

.show() In the example above the .show() method is the first that we use. The way it works is to simply look at the state of the element, and if it is hidden, go ahead and show it. We also pass in a speed option, in this case slow. Running the .show() method on an element that is already being shown has no effect.

.hide() The second line of jQuery makes use of the .hide() method and works just like .show() except it is the opposite in effect. If the element is shown, then go ahead and hide it. In this case we pass in a speed of normal. Running the .hide() method on an element that is already hidden also has no effect, just like in the case of .show() .

.toggle() This method is quite useful and intelligent in that it can automatically determine if the matched element(s) are being shown or not. When .toggle() runs, it simply looks at the current state, and then swaps it with the other. We also have the option to pass in the speed with this method as well. In this example we pass in the fast option, and as you can see by clicking above to run the toggle, it looks pretty slick!

Also worth noting is that we are using version three of the Twitter Bootstrap Framework. This way we can just add classes to our elements as we like, and no need to take the time to write our own CSS. I’m lazy, oh well.

Fading Elements In or Out with jQuery

This is another common visual effect in the web pages of today. jQuery provides a nice implementation of the fade effect for elements on the page. You can control the level to which they will fade, the speed of the fade effect, as well as fading elements out entirely. The speed argument works much like the .show() , .hide() , and .toggle() methods in that you can pass a string such as slow, normal, or fast, or alternatively you can provide the speed in milliseconds. Here are the prebuilt methods for you to use in jQuery for various fade effects. See the jQuery fadeOut() in action.

Method Use Case fadeIn(speed, callback) Fades in all matched elements by changing the opacity assigned to them and triggers an optional callback function upon completion fadeOut(speed, callback) Fades out all matched elements by setting opacity to 0 and changing display to none. Triggers an optional callback on completion fadeTo(speed, callback) Fades the opacity of all matched elements to a value provided and triggers an optional callback function when complete

With these additional jQuery methods now part of the toolkit, let’s go ahead and check out some awesome examples.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!doctype html> <html> <head> <meta charset = "utf-8" > <title> jQuery Event Handling </title> <link rel = "stylesheet" href = "bootstrap/css/bootstrap.css" > </head> <body class = "container" > <p> </p> <div class = "btn btn-lg btn-info" id = "fadein" > Fade In </div> <div class = "btn btn-lg btn-success" id = "fadeout" > Fade Out </div> <div class = "btn btn-lg btn-warning" id = "fadeto4" > Fade to .4 </div> <div class = "btn btn-lg btn-danger" id = "fadeup" > Fade to 1 </div> <p> </p> <div id = "watch" class = "jumbotron alert-success" > <h2> Click The Buttons For Cool Fades! </h2> </div> <!-- jQuery 1.11.1(latest non minified) --> <script src = "jquery-1.11.1.js" > </script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src = "bootstrap/js/bootstrap.js" > </script> <!-- custom written js --> <script src = "tut.js" > </script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 jQuery ( document ) . ready ( function ( $ ) { jQuery ( '#fadein' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeIn ( 'slow' ) ; } ) ; jQuery ( '#fadeout' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeOut ( 'normal' ) ; } ) ; jQuery ( '#fadeto4' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeTo ( 'fast' , 0.4 ) ; } ) ; jQuery ( '#fadeup' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeTo ( 'slow' , 1.0 ) ; } ) ; } ) ;

And here is the coolness, click those buttons!

Now that was pretty slick, and you can see how it is so easy to add some very nice effects to your web page with really simple code. In these examples we simply grabbed the element and experimented with the various fade effects passing in different speeds but we did not explore anything with a callback function. Callback functions are awesome because many times as you’re constructing your next masterpiece in your mind, you may be thinking, “Hmm, I wish I could trigger something to happen automatically after this first thing happens” Well friend you are in luck, because that is exactly what a callback function is going to enable you to do. Triggering callback functions in JavaScript and jQuery is super common, so we definitely want to be comfortable with how to write and implement them in our projects.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!doctype html> <html> <head> <meta charset = "utf-8" > <title> jQuery Event Handling </title> <link rel = "stylesheet" href = "bootstrap/css/bootstrap.css" > </head> <body class = "container" > <p> </p> <div class = "btn btn-lg btn-info" id = "fadein" > Fade In </div> <div class = "btn btn-lg btn-success" id = "fadeout" > Fade Out </div> <div class = "btn btn-lg btn-warning" id = "fadeto4" > Fade to .4 </div> <div class = "btn btn-lg btn-danger" id = "fadeup" > Fade to 1 </div> <p> </p> <div id = "watch" class = "jumbotron alert-success" > <h2> Click The Fade Out </h2> </div> <!-- jQuery 1.11.1(latest non minified) --> <script src = "jquery-1.11.1.js" > </script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src = "bootstrap/js/bootstrap.js" > </script> <!-- custom written js --> <script src = "tut.js" > </script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 jQuery ( document ) . ready ( function ( $ ) { jQuery ( '#fadein' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeIn ( 'slow' ) ; } ) ; jQuery ( '#fadeout' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeOut ( 'normal' , function ( ) { setTimeout ( function ( ) { jQuery ( '#watch' ) . removeClass ( 'jumbotron alert-success' ) . html ( '<h1>Boo Yeah! Callback Triggered!</h1>' ) . addClass ( 'jumbotron alert-info' ) . fadeIn ( 10 ) } , 1500 ) ; } ) ; } ) ; jQuery ( '#fadeto4' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeTo ( 'fast' , 0.4 ) ; } ) ; jQuery ( '#fadeup' ) . click ( function ( ) { jQuery ( '#watch' ) . fadeTo ( 'slow' , 1.0 ) ; } ) ; } ) ;

Boo Yeah! I see what you did there. This time around we added a callback to the Fade Out option. In addition, we used the native JavaScript setTimeout() function to wait an additional 1.5 seconds before triggering that callback function. This way you get that “Wait for it….” effect. For more information on how to use setTimeout() , check our the article that covers Awesome JavaScript Events. Understanding all of the JavaScript events mentioned there also helps with getting up to speed in handling events in jQuery as well.

Sliding Page Elements with jQuery

Cha Cha this time, left foot this time, slide to the left, slide to the right, everybody clap your hands! … Oh wait, sorry, too much Nintendo Just Dance happening here. Sliding in jQuery is not for dancing and moving elements around on the screen, it’s actually another way of hiding and showing elements, but with a slide effect. You can easily slide elements up or down in the page, or simply toggle the slide effect as well. Here’s a summary of those slide methods that are available and how they operate in a nice table format.

Method Use Case slideDown(speed, callback) Displays all matched elements by changing their height, giving a slide effect. You can also trigger a callback once complete slideUp(speed, callback) Hides all matched elements by changing their height, giving a slide effect. You can also trigger a callback once complete slideToggle(speed, callback) Toggles all matched elements by changing their height, giving a slide in and out effect. You can also trigger a callback once complete

Just like the other methods that we’ve been looking at so far, let’s bust out some code to see how these effects actually work in real time on a live web page.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!doctype html> <html> <head> <meta charset = "utf-8" > <title> jQuery Event Handling </title> <link rel = "stylesheet" href = "bootstrap/css/bootstrap.css" > </head> <body class = "container" > <p> </p> <div class = "btn btn-lg btn-info" id = "slideup" > Left Foot This Time </div> <div class = "btn btn-lg btn-success" id = "slidedown" > Right Foot This Time </div> <div class = "btn btn-lg btn-warning" id = "toggle" > Everybody Clap Your Hands </div> <p> </p> <div id = "watch" class = "jumbotron alert-info" > <h2> Cha Cha Real Slow </h2> </div> <!-- jQuery 1.11.1(latest non minified) --> <script src = "jquery-1.11.1.js" > </script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src = "bootstrap/js/bootstrap.js" > </script> <!-- custom written js --> <script src = "tut.js" > </script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 jQuery ( document ) . ready ( function ( $ ) { jQuery ( '#slideup' ) . click ( function ( ) { jQuery ( '#watch' ) . slideUp ( 'slow' ) ; } ) ; jQuery ( '#slidedown' ) . click ( function ( ) { jQuery ( '#watch' ) . slideDown ( 'normal' ) ; } ) ; jQuery ( '#toggle' ) . click ( function ( ) { jQuery ( '#watch' ) . slideToggle ( 'fast' ) ; } ) ; } ) ;

Just bust a move

Awesome! As we can see, sliding elements was really easy to implement as well. It almost seems that you would see things slide across the screen but again, this effect actually displays or hides elements using height adjustment of elements in the wrapped set.

Creating Custom Animations With jQuery

In addition to the prebuilt animation and effects methods in the jQuery library, there are also ways to animate elements on the web page using your own custom configuration. The benefit of the prebuilt methods is that they are so easy to use. Using the custom animation methods in jQuery is a little more work, but does give a bit more control. Worth noting is that the .animate() method only works on CSS properties that have numeric values. If you try to animate something like borderColor set to red, it will not work!

These are the formats of the custom animation functions.

Method Use Case animate(params, duration, easing, callback) Creates a custom animation params The properties on the elements to animate duration The number of milliseconds the animation should take easing The type of easing to use, can be linear or swing callback The function to trigger on the completion of the animation animate(params, options) Creates a custom animation params The properties to animate options Set of options for the animation stop() Stops any currently running animations on the wrapped set

Alright now, we’re about to get funky. I want to see you on the dance floor y’all. DJ, play that song.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!doctype html> <html> <head> <meta charset = "utf-8" > <title> jQuery Event Handling </title> <link rel = "stylesheet" href = "bootstrap/css/bootstrap.css" > </head> <body class = "container" > <p> </p> <div class = "btn btn-lg btn-info" id = "top" > Left Foot This Time </div> <div class = "btn btn-lg btn-success" id = "middle" > Right Foot This Time </div> <div class = "btn btn-lg btn-warning" id = "bottom" > Everybody Clap Your Hands </div> <p> </p> <div id = "watch1" class = "jumbotron alert-info" > <h2> Cha Cha Real Slow </h2> </div> <div class = "jumbotron alert-success" > <h2 id = "watch2" > Just Bust a Move </h2> </div> <div id = "watch3" class = "jumbotron alert-warning" > <h2> If you want it, you got it </h2> </div> <!-- jQuery 1.11.1(latest non minified) --> <script src = "jquery-1.11.1.js" > </script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src = "bootstrap/js/bootstrap.js" > </script> <!-- custom written js --> <script src = "tut.js" > </script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 jQuery ( document ) . ready ( function ( $ ) { $ ( "#top" ) . click ( function ( ) { $ ( "#watch1" ) . animate ( { borderRadius : 100 , paddingBottom : 24 , paddingTop : 24 } , 1000 ) ; } ) ; $ ( "#middle" ) . click ( function ( ) { $ ( "#watch2" ) . animate ( { fontSize : 75 } , 2000 ) ; } ) ; $ ( "#bottom" ) . click ( function ( ) { $ ( "#watch3" ) . animate ( { paddingLeft : 300 } , 1000 , "swing" ) ; } ) ; } ) ;

So what do we notice about this code here? That’s right friends, we are directly manipulating CSS values, and they can only be values of a numeric type! What is interesting about this particular example is that we are using the Twitter Bootstrap Framework to decorate our HTML as a starting point. Normally, you would have a stylesheet that assigns various CSS properties to certain values and those are applied to the elements on the page via id’s or classes. It works if you are using a framework as well. The key to remember is that, any property that you are trying to animate must already be applied to the HTML element to begin with. For example, if you want to animate a border-radius to 100px on a particular element, that element must first at least have that property set to some other value. In this case, the original border-radius value was 6px. If the particular element had no border-radius property to begin with, well then, your animation is not going to work so well is it?! 🙂

Enough talk, show me the effects!

Fun Stuff Indeed! The benefit with using the custom animation option is again, you get very granular control over the exact values of the CSS styles assigned to your various elements on the page. Some of the animations out there on the web today are really incredible. I’m sure you have seem some that have really made you wonder how the effect was accomplished as well. If you have enough patience, creativity, and imagination, you will also be creating custom animations that will knock peoples socks off!