20 Cool jQuery Tricks for Web Developers

For those of you that don’t know, jQuery is a rich JavaScript library that makes it possible for web developers to produce quite remarkable effects with just a few lines of code. It makes writing lengthy JavaScript code bearable, by turning long, repetitive tasks into shorter, more understandable ones. It’s simple to use, saving you time and effort. jQuery is massively popular, for obvious reasons, and everybody’s using it. To make sure you stand out, it’s vital you incorporate some of the more quirky capabilities of jQuery into your web sites. That’s where this list comes in!
We bring you 20 tricks capable of transforming a boring site into a slick, cool and interesting one that users will want to engage with again and again. Some of these tricks are more suited to beginners, while others will teach even the biggest jQuery geeks a thing or two.

1.) Image Cross Fade Transition

Learn how to fade one image into another. Three different methods of achieving this aim are discussed here: using two images, using a single image and simply using CSS.

2.) Vertically Scrolling Menu

Create an innovative and slick vertically scrolling menu for your website that’s really easy for visitors to use.

3.) Create a Fancy Share Box

Most sites these days feature social media share links, but most present them in a really boring way. You can make your site stand out by using the tricks outlined here. Align and overlap your share links to save space, looking sleek in the process.

4.) Create Background Image Animations

Creating background image animations is easier than you think, using jQuery. You’ll need to download the Background-Position plugin to do it, but a minimal amount of code is required. Who needs Flash?

5.) Create a Smooth jQuery Popup

Learn to create a polished popup using HTML, CSS and the jQuery Library. Get it done in just two easy steps.

6.) Use a Cheat Sheet

A well-designed cheat sheet makes using jQuery simple. Above, you’ll find a great online cheat sheet for 1.2.6.

7.) Build An Incredible Login Form

This is a great space-saving jQuery trick, but it’s not as easy as some of the others in this list. Follow 16 steps to build an animated login form which folds out from the top panel when clicked.

8.) Create a Slick Tabbed Content Area

This easy to follow tutorial will guide you through a relatively simple method for creating a minimal, really functional tabbed content area, using CSS and jQuery.

9.) Rounded Corners

Use jQuery’s Wrap, Prepend and Append functions to create rounded corners, to make your site look that little bit more welcoming.

10.) slideViewer

Use slideViewer, a lightweight (1.5kb) jQuery plugin, to create a smart looking image gallery without having to write loads of HTML. It’s customisable and intuitive.

11.) Build a LavaLamp Menu

The LavaLamp menu is really satisfying to use and looks great. Follow this tutorial to create your own.

12.) Style Switcher

Use jQuery and PHP to create a clever style switcher which will really make your website stand out from the crowd. In this example, ‘day’ and ‘night’ styles are used, but there are thousands of potential styles which could be combined using this method.

13.) jQuery Tools

jQuery Tools is a collection of six different, equally amazing tools for you to use in your website. These include the brilliant Scrollable, which makes scrollbars a thing of the past.

14.) Implement a News Ticker

Create a great news ticker, which features fade in and out effects, with jQuery and just 10 lines of JavaScript code.

15.) Create an Amazing Music Player

Use xHTML and jQuery to create a fantastic music player, which users can interact with by clicking and dragging with their mouse or clicking their directional keys and space bar.

16.) Jcrop

Jcrop is a simple jQuery plugin that lets you quickly and easily crop images.

17.) Simple jQuery Dropdowns

Follow this tutorial to build a dropdown menu in the simplest possible way. With little code and minimal styling, this menu is highly adaptable.

18.) Build a Chat Room

Use jQuery and PHP to build a chat room that can be set up quickly and with a minimum of effort. No database is required.

19.) AnythingSlider

There are loads of jQuery sliders out there, but AnythingSlider has got to be one of, if not, the best. This slider is a plugin, so easy to implement in your web site. AnythingSlider continues to slide in the same direction, even when you reach the last image, and pauses autoplay on hover.

20.) Colour Fading Menu

This attractive colour-fading menu provides a good alternative to the LavaLamp menu listed above. Tabs in this menu fade to a different colour on hover and then fade back to their original colour when the cursor is removed.