Best jQuery Plugins Plugins & Tutorials with Demo

    WaveAnimate jQuery Plugin

    WaveAnimate jQuery Plugin

    A plugin to animate a selection of elements in a waveing way, from one side to the other, a little bit like a wave, hence the name.

    dynamo.js : Generate dynamic bits of HTML using jQuery

    dynamo.js : Generate dynamic bits of HTML using jQuery

    Creates dynamic bits of HTML to add some zest to your content.Dynamo is the simple way to add a new dimension to your site content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage.

    dynamo.js takes any portion of text and allows you to cycle through different content. Use it to add subtle effects to your webpage, or to make a particular section pop.

    SlideInReplace jQuery Plugin

    SlideInReplace jQuery Plugin

    A jQuery Plugin to replace an element with an other element in a fadeing, sliding animation. Well, feel free to style your elements however you want, just make sure that the replacement is of the same size and relatively positioned or absolutely positioned, floats won’t work correctly.

    jQuery Super Labels Plugin

    jQuery Super Labels Plugin

    This plugin was born out of the need to use the label-over-field method for forms I was working on. There are other plugins out there that do pretty much the same thing, but none of them had the – for lack of a better word – sexiness that I was looking for. This implementation makes the label slide across the field☨ when gaining focus and fade out when a value is entered.

    Presenteer.js : jQuery HTML5 Presentation Tool

    Presenteer.js : jQuery HTML5 Presentation Tool

    Presenteer.js is a flexible HTML5 presentation tool that uses CSS3 transforms and transitions to make smooth HTML presentations.Works on Chrome, Firefox, Opera, Android, iPhone and IE9.It uses canvas, where canvas is a selector or jQuery element of the canvas on which the presentation is placed. It is this canvas that will be repositioned with CSS3 transform to slide a certain element into view.

    jQuery Before/After Plugin

    jQuery Before/After Plugin

    New York Times online had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were.

    CatchMyFame found this very useful and immediately created Before/After jQuery Plugin for the same purpose. The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

    jQuery YouTube Popup Player Plugin

    jQuery YouTube Popup Player Plugin

    This is an easy to use jQuery Plugin to embed YouTube videos on your page by displaying them in a popup dialog box. I have used jQuery UI Dialog Widget as the popup container instead of reinventing the wheel. jQuery UI Dialog is a robust cross-browser mechanism to display a popup dialog box with title bar including a movable box with modal behavior.

    This is plugin is very simple to configure and use. YouTube Video Id can be stored in any attribute of the DOM element. This plugin keeps track of all the assigned popup events and won’t assign the click event if there already exists one, that way you can reassign the event for dynamically added HTML elements without affecting the existing ones.

    simpleWeather : How to display weather with jQuery

    simpleWeather : How to display weather with jQuery

    A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.In the demo shows how easy it is to display a simple weather widget that is clean and customizable. This is the basic usage showing only the current weather and an image. simpleWeather does not return any html or css classes which lets you do with the data as you please.

    jQuery Facebook Multi-Friend Selector Plugin

    jQuery Facebook Multi-Friend Selector Plugin

    I created a new jQuery pluging that works with the new Facebook javascript SDK to present a users list of friends and allows them to select the friends they would like to do X with. That “X” is up to you; once the user has selected their friends, you call a function on the plugin that returns an array of the friends Facebook Ids. A few key points:

    • client-side, no server-side PHP blah blah blah dependencies like some of the other alternative friends selectors
    • depends on jQuery and the new Facebook Javascript API
    • only requires several lines of code to drop-in