Fun with jQuery Animations: My Current Top 5

I just finished up the jQuery section of Free Code Camp and I tinkered around with it afterwards. If you have just started coding or have been using JavaScript for awhile but haven’t used jQuery, I recommend checking it out. (You can do so here: jQuery.com.) It is super powerful and super simple. To of my favorite things. I thought I would share a Top 5 list of my current favorite animations that I have learned.

5. animate()

I feel like I’m cheating with this one, so I’ll put it at number five. Basically, this will allow you to move, resize, etc. an element over a set amount of time. Imagine the possibilities. This is widely used, but I found it incredibly useful. Therefore, I included it here. Here is the link to the documentation: animate().

4. fadeToggle()

A little fancier that the typical fadeIn() or fadeOut(), fadeToggle() does just what you think it does. It will fade an object in and out as it is triggered. Simple, but awesome! Here is a link to some documentation on how to use it to its fullest: fadeToggle().

3. Animated Text and Icon Menu

This one is more complex and requires code other than jQuery. It makes some elements slide out, changes and animates the background color of the item, and then slides the elements back in with a different color. Pretty cool. Check it out here: Animate Text and Icon Menu.

2. explode()

Am I immature for putting this at number two? Who doesn’t love a good explosion? This is simple and easy to use. It does what is says and nothing more. Take your divs and blow them up! Here is some useful documentation: explode().

1. circulate()

Seriously, this one is so much fun. It essentially makes objects ‘circulate’ is circles and ellipses. I can’t do it justice with a text explanation. Navigate to this site to see the magic: circulate().

Conclusion

There are so many other excellent jQuery animations. Some are simple and easy to use. Others require much more information and calculations to optimize them. Some create beautiful menus and others make text come alive. The best thing to do is to explore them all. Check them out and let me know your favorites.

jquery-mark-light

Share

Leave a Reply

Your email address will not be published. Required fields are marked *