15个效果非常炫的jQuery插件

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 by John Resig. Used by over 46% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.

This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery framework allows the creation of powerful and dynamic web pages and web applications (source: Wikipedia).

jQuery is a “write less, do more” JavaScript library, developers can trust jQuery blindly to produce awesome inspiring effects to get the best results. Here are 15 useful and new  jQuery Plugins which I have handpicked from jQuery articles or plugins published in last couple of months on the blogosphere, I hope you’ll like the latest on jQuery Plugins ..

Super Simple Lightbox with CSS and jQuery

Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images. It’s perfect for image galleries, portfolios, and more!

Demo | Tutorial | Download

Animated Scroll to Top

A detailed tutorial on how to create an animated scroll to top, it is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.

Demo | Tutorial | Download

Creating a Modern Gallery with Raphael

How to create a modern gallery (with cool animation effect) using Raphael library and jQuery. First of all, check out Raphael website and read the documentation. In this tutorial we will use just a little part of this what Raphael offer.

Demo | Tutorial | Download

Simple Tooltip w/ jQuery & CSS

There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. The markup is as simple as possible but at the same time flexible enough to accommodate various scenarios you would run into.

Demo | Tutorial

Circular Content Carousel with jQuery

The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

Demo | Tutorial | Download

Diagonal Fade

This is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away. DiagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2

Demo & Download

Parallax Slider with jQuery

Making use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

Demo | Tutorial | Download

Dropdown Login Form

A simple jQuery dropdown login form, it’s easy to implement and lightweight and does everything you need it to. All you have to do is implement and hook it up to your website.

Demo | Download

Smart Wizard

Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users. Using Smart Wizard 2.0 you can easily do input validation and so it is good for user registration and kind of tasks.

Demo | Download

Animated Skills Diagram with Raphaël

how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs.

Demo | Tutorial | Download

Expanding Fullscreen Grid Portfolio

A neat experimental portfolio template. The main idea is to have a grid layout that is created with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image. Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”.

Demo | Tutorial | Download

Simple Vote Using JQuery Animate

Simple idea to use JQuery animate function in voting system, the idea is just expanding the div element (css width property) using the animate function, we just need to add the same value on the width element.

Demo | Tutorial

Ezoverlay

A self-contained jQuery plugin that enables element and fullscreen overlays, with optional static and dynamic modal content – that virtually eliminates the need for additional html or css code.

Demo | Download

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in this css) that essentially acts as a window where two other items of your choosing “peek” through.

Demo | Tutorial | Download

Triggered Infinite Scroll

This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.(Custom trigger, non-automatic. Twitter-style)

Demo | Tutorial