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.

About The Author

Tom designs and blogs for a Manchester, England based provider of Epson printer ink, toner, paper and other print accessories. You can read more of writing on CreativeCloud where he blogs about the arts, design and advertising.

We are globally recognized for best managed web hosting plans, our MB2-631 exam dumps, most recent 70-652 exam questions and ccie wireless tutorials certify you for final cissp certification exam.

Posted by brantwilson

Brant Wilson is a staff writer for the DesignMag network. Brant enjoys all things design and development, dogs, and candy. Brant is passionate about training freelancers. Learn how you can earn $125+ freelancing. Start learning for free now! Connect with Brant on google+

26 Comments

  1. […] 20 Cool jQuery Tricks for Web Developers  Submitted by Nirhana […]

    Reply

  2. Nice collection, thanks for sharing. Jquery FTW

    Reply

  3. Good collection. Thanks

    Reply

  4. It was interesting to read this article and I hope to read a new article about this subject in your site in the near time.

    Reply

  5. Great roundup. Thnx for sharing

    Reply

  6. Hey Nice Collection.
    Thanks for sharing. This is very useful for jQuery developers.

    Reply

  7. […] 20 Cool jQuery Tricks for Web Developers 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. […]

    Reply

  8. Thank you for the great web site – a true resource.

    Reply

  9. Cool article. will back soon to read another. thanks for sharing.

    Reply

  10. Great collection. Thanks for sharing.

    Reply

  11. Good stuff.

    That jQuery/PHP chat seems interesting. I’ll definitely check that out. Thanks.

    Reply

  12. 1st or 2nd grade, but because he is tender hearted you have to be careful, most violent people start out ttender hearted then they get picked on all the time until one day they get tired of being bullied and they strike back and trust me if your son can box and he’s in about the 6th grade and a 8th grader picks on him , your son being tender hearted will be the least of your worries.

    Reply

  13. Wicked nice list. Going to give the cool login a shot. Looks cool. Thanks again.

    Reply

  14. Checking around for the best Chat Programs and located a fantastic website for them and your website seemed like your readers would possibly value it so I’ve linked to it right here!

    Test it out!

    – All the most effective

    Reply

  15. Great collection. Than you for sharing. bookmarked.

    Reply

Leave a reply

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