JavaScript
Article

Top 15 jQuery Tricks

By Sam Deering

I’ve found these very cool jQuery tricks for you. Some of them offer weird effects that are very entertaining and fun to use.

1. Image Cross Fade Transition

A basic trick to fade one image to another.

Source:
http://jqueryfordesigners.com/image-cross-fade-transition/


2. Background Image Animations

This offers easy to use jQuery Background Image animation effects.

Source:
http://snook.ca/archives/javascript/jquery-bg-image-animations/


3. Smooth jQuery popup

Create a polished jQuery popup using this trick.

Source:
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/


4. Fancy ShareBox

Create a partially hidden button that will be shown later when hovered.

Source:
http://www.jankoatwarpspeed.com/post/2009/07/13/Create-fancy-share-box-with-CSS-and-jQuery.aspx


5. Slick Tabbed Area

Have your contents tabbed!

Source:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/


6. Rounded Corners

With the help of jQuery Wrap, Prepend and Append functions. Creating rounded corner is possible.

Source:
http://docs.jquery.com/Tutorials:Rounded_Corners


7. Style Switcher

jQuery and PHP combination would create a clever style switcher.

Source:
http://net.tutsplus.com/tutorials/javascript-ajax/jquery-style-switcher/


8. jQuery Tools

This is a collection of six different and equally amazing tools for you to use in your website.
https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2011/01/jQuery-Plugins-jQuery-Tools.jpg
Source:
http://flowplayer.org/tools/index.html


9. Chat Room

This is a team up of jQuery and PHP to build an interactive chat room.

Source:
http://css-tricks.com/jquery-php-chat/


10. News Ticker

Create a news ticker with fade it/out effects.

Source:
http://woork.blogspot.com/2009/05/how-to-implement-news-ticker-with.html


11. SlideViewer

This is a lightweight (1.5kb) jQuery plugin that creates an image gallery without requiring to write HTML codes.

Source:
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html


12. Cheat Sheet

Tired of old looking plain jQuery Cheat Sheet? Check this out.

Source:
http://www.visualjquery.com/


13. Vertically Scrolling Menu

This is a basic but innovative vertical scrolling menu for your website’s navigation.

Source:
http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial


14. Music Player

Create a fantastic jQuery music player with the help of xHTML.

Source:
http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/


15. Colour Fading Menu

This provides a good LavaLamp menu alternative menu. Color fades when hovered.

Source:
http://css-tricks.com/color-fading-menu-with-jquery/

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.