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.
http://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/

Sam Deering Sam Deering
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.