Plugins: Animation and Effects

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

Version	Date	Links	Status
1.6	2008-Sep-24	Release notes	Recommended for 1.2.x

$().wTooltip (Wayfarer Tooltip)

Last changed: 12 weeks 4 days ago

The "wTooltip" is a lightweight, flexible tooltip that is made to be easily customized. The default behavior is the conversion of the title attribute into the tooltip, which makes quick creation of multiple tooltips on any page a snap.

There are many more advanced options, including callBefore, and callAfter parameters, which allow custom code to be integrated easily with the standard behavior. It also has an easy interface to allow the tooltip to be completely styled at the user's discretion.

The complete documentation is available at http://wayfarerweb.com/wtooltip.php

Version	Date	Links	Status
1.0.2	2009-Apr-06	Download Release notes	Recommended for 1.0.x

3D Image Carousel

Last changed: 35 weeks 2 days ago

3D Carousel creates a mini-interactive page that can be a fun addition to a site.

The inspiration came from the flash version posted on http://www.gotoandlearn.com. I recently used this version and was very pleased with it, but wanted something more flexible.

Version	Date	Links	Status
1.2	2008-Oct-29	Download Release notes	Recommended for 1.2.x

Activebar2

Last changed: 19 weeks 6 hours ago

Activebar2 is a crossbrowser information bar mimicking the look and feel of the widely spread bars used in modern browsers. It provides an easy and unobtrusive way of communicating all sorts of messages to your users. Or to provide help by displaying tips and usage informations.

Version	Date	Links	Status
2.0.1	2009-Feb-20	Download Release notes	Recommended for 1.3.x

Add to Cart

Last changed: 19 weeks 3 days ago

This plugin implements visual effect of adding something to cart (busket). Visually it's similar to Microsoft Word post-save visual effect, when a gray rectangular of page moves down to the toolbar.

Version	Date	Links	Status
0.6	2009-Feb-17	Download Release notes	Recommended for 1.2.x

Agile Carousel

Last changed: 41 weeks 1 day ago

Currently in beta version. Not tested for security. Security & Feature enhancements on the way!

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

View Examples!

Featured Example:
http://www.5bosses.com/examples/agile_carousel/multi_example/carousel.ht...
All the Bells & Whistles:
http://www.5bosses.com/examples/agile_carousel/full_example/carousel.htm...
JQuery UI example:
http://www.5bosses.com/examples/agile_carousel/jqueryui_example/carousel...
simple example:

Version	Date	Links	Status
0.1.1-beta-1	2008-Sep-04	Download Release notes	Recommended for 1.0.x

Ajax Tooltip script

This script enhances the default "title" attribute of HTML so certain tooltips can instead get their contents from an external file, with rich HTML content and all. Integration is easy and non obtrusive, and for the sake of efficiency, the script will only use Ajax to load the tooltip's content the very first time the user rolls over the attached element.

Version	Date	Links	Status
1.2	2008-Jul-10	Release notes	Recommended for 1.2.x

animate clip style property

Quick "plugin" to support animation of the CSS style.clip property via the jQuery.fn.animate() facility in the same vein as John Resig's jquery.color.js plugin.

This is ultra-light weighing in at only 19 lines of code, 6 of which comments.

Version	Date	Links	Status
0.1.1	2008-Aug-13	Release notes	Recommended for 1.0.x
0.1.0	2008-Aug-08	Release notes	Recommended for 1.2.x

Animate to Class

Last changed: 28 weeks 1 day ago

Animate to Class is a jQuery plugin that make the use of jQuery.Animate() easier, you can animate directly to a class, without pass all params directly via javaScript.

This is an alternative way to do animations using jQuery, you just need to create a new class in your CSS, and pass it as param.

Using animate:

$("#foo").animate({  
"margin-left" : "40px",  
"width" : "300px",  
"heigth" : "150px"  
}, 1000);  

Using animateToClass:

$("#foo").animateToClass("bar", 1000);

Animated Collapsible DIV

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. Three distinguishing features of this script are:

Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.
Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.
Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.

Version	Date	Links	Status
2.2.1	2009-Mar-09	Release notes	Recommended for 1.2.x

Animated Hover

Last changed: 1 year 15 weeks ago

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions

Version	Date	Links	Status
1.0	2008-Mar-14	Download Release notes	Recommended for 1.2.x

Autoimage

Last changed: 1 year 34 weeks ago

Provides scripted image animations; cross fade between images (using alpha transparency); smooth image based buttons.

Version	Date	Links	Status
1.0.0	2007-Nov-07	Download Release notes	Recommended for 1.0.x

Animation and Effects

background canvas drawing plugin for round corners, gradients and tabs

Last changed: 13 weeks 5 hours ago

backgroundCanvas helps to decorate a semantic html/css layout. It places a <canvas> object in the background and enables drawing on this canvas object. It can be used to draw background gradients, borders and boxes with round corners, tabs and any other border or background. It's pure JavaScript and don't use images. It is designed to fallback gracefully to CSS if the browser don't support JavaScript.

backgroundCanvas automates the insertion of the canvas object behind the content (z-order). It also provides higher level drawing functions for round corners and tabs.

I'm currently moving the code to Google Code and do bug fixing. I'm releasing the next beta till end of November 2008. The API documentation will be enhanced too.

Project Homepage: http://www.maierhofer.de/BackgroundCanvas.htm
Demos: http://www.maierhofer.de/BackgroundCanvasDemo.htm

Version	Date	Links	Status
0.8.4-beta	2009-Apr-03	Download Release notes	Recommended for 1.3.x

Background-Image Transition Plugin

Last changed: 13 weeks 1 day ago

This plugin enables you to change the background image of an element which acts like a canvas.

Version	Date	Links	Status
1.0.1	2009-Apr-02	Download Release notes	Recommended for 1.0.x

Background-Position Animations

Last changed: 9 weeks 3 hours ago

Adds the ability to do background-position animations to jQuery 1.2, and newer.

$('#background').animate({backgroundPosition: '(150px 250px)'});

Version	Date	Links	Status
1.1	2009-Apr-26	Download Release notes	Recommended for 1.3.x

Banner Swapper

Last changed: 35 weeks 3 days ago

This is my first jQuery plugin! It is basically a slideshow, but unlike most slide shows, this one does not load all of the elements at once into their own separate containers. The goal of Banner Swapper is to use only two elements, swapping the images back and forth, eliminating the need to load potentially dozens of frames.

More information is available on my blog (read part 1 and part 2). Comments and suggestions for improvement are certainly welcome! For a live demo visit McAllen.net and take a look at the banner up at the top.

Version	Date	Links	Status
0.2	2008-Dec-12	Release notes	Recommended for 1.2.x

beePolaroid

An Experiment using instant.js and jQuery.

All documentation is in Spanish.

Version	Date	Links	Status
0.0.1-Alpha	2008-Apr-27	Release notes	Recommended for 1.0.x

Animation and Effects

Before/After

Last changed: 1 week 21 hours ago

I was reading the New York Times online and they 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. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it.

Version	Date	Links	Status
1.0.0	2009-Jun-26	Download Release notes	Recommended for 1.3.x

Bounce

Last changed: 1 year 20 weeks ago

* Added live demo page (url at bottom of page)

This project allows the user to extend the elements on the web page (created for use with 'textarea' elements, but no reason why it cannot be used elsewhere) with a bounce animation.

Version	Date	Links	Status
1.0.0-updated-example	2008-Feb-12	Download Release notes	Recommended for 1.0.x
1.1.0	2008-Feb-14	Download Release notes	Recommended for 1.2.x

Box Shadow

Last changed: 36 weeks 5 days ago

CSS3 box-shadow is supported in Firefox 3.1 (beta) and Safari 3.1.2..

css-selector { boxShadow : xOffset yOffset blurRadius shadowColor; }

Unfortunately this is not supported in Internet Explorer, but it is however possible to create an equivialant effect with the IE popertiary CSS Filter Blur and serve this with the jQuery plugin jquery.boxshadow.js.

$(css-selector).boxShadow( xOffset, yOffset, blurRadius, shadowColor );

Demo site

Se also Text Shadow

broller

Last changed: 22 weeks 3 days ago

An Elegant and configurable rollover plugin.

Simple configuration via tag attributes or advanced config from passed in options.

Can be configured to affect another elements src other than the trigger point and even change the src of multiple images with different sources. simply.

Version	Date	Links	Status
0.1	2009-Jan-27	Download Release notes	Recommended for 1.0.x

Bubble Puff

Last changed: 1 year 14 weeks ago

A visual information bubble effect, as per the Coda web site.

Information will "puff" upwards, and when the mouse moves away, "puffs" away upwards again.

It's worth pointing out that the examples and demo links below are from a non-plugin version of the code, but the implementation is pretty much the same (one user was awfully upset that they didn't match!).

Version	Date	Links	Status
1	2008-Mar-27	Download Release notes	Recommended for 1.0.x

Animation and Effects

CANVAS based image rotation

Last changed: 4 weeks 2 days ago

This is an final product of a Wilq32.PhotoEffect Snippet. Actually you can use this simple and tiny script to get effect of rotated images directly from client side (for ex. user generated content), and animate them using own functions. Simple interface, few interesting options. Just give it a try!

Version	Date	Links	Status
0.6	2009-Jun-03	Download Release notes	Recommended for 1.2.x

canvasSwap

Last changed: 6 weeks 5 hours ago

Description

A jQuery plugin to induce an image swap on hover. Although this plugin does it's job of swapping out images extremely well , that's not what it's main intention is. What canvasSwap sets out to do is not only provide a great image swap utility, but it also allows swapping transparent PNG images in IE 6! (with the help of a PNG transparency script)

This project is also hosted on Google Code

Usage

Example 1: To induce an image swap on images with the class of 'myswap', the image to swap having a suffix of '_hover', and IE 6 PNG support enabled.

Version	Date	Links	Status
1.0-beta	2009-May-22	Download Release notes	Recommended for 1.3.x

citizenColor, add HSL color animations to jQuery.

Last changed: 28 weeks 4 days ago

According to w3c, RGB color schemes is hardware-oriented, and non-intuitive wheareas HSL color schemes, representing colors with their Hue, Saturation and Lightness, makes much more sense for human beings. This is why HSL color values are now part of the draft of CSS3

With citizenColor, you don't have to wait for CSS3 to use HSL color scheme with jQuery's animate function!

$('h1').animate({color: 'hsl(128,70%,20%)'});

But you can do much more than that : use HSL to it's full potential by modifying color channels separately, or doing relative color animation.

$('body').animate({backgroundColor: hsl(+=0,+=0%,+=50%)});

This code will, as you can expect, increase the lightness of your background by 50% (from 20% to 70% for example).

$('body').animate({backgroundColor: hsl(-=24,80%,20%)});

Version	Date	Links	Status
1.0-a1	2008-Dec-15	Download Release notes	Recommended for 1.2.x

collapsor

Last changed: 18 weeks 3 hours ago

collapsor opens and closes sublevel elements, like a collapsable menu

Version	Date	Links	Status
1.1	2009-Feb-27	Download Release notes	Recommended for 1.2.x

Color Animations

Last changed: 1 year 42 weeks ago

Adds the ability to do color animations to jQuery 1.2, and newer.

Version	Date	Links	Status
1.0	2007-Sep-09	Download Release notes	Recommended for 1.2.x

colorBlend! Color fading plugin.

Last changed: 37 weeks 1 hour ago

Based on the fade anything plugin, I wanted something a little more robust.
This plugin accepts a javascript array of parameter objects.
current version is always available here: http://www.happinessinmycheeks.com/colorBlend
The current version is 1.6.1

Now uses better transitioning! Multiple colors and opacities to cycle through!

Example:

$("body").colorBlend([{colorList:["black",  "white"], param:"color"}]);
var myColors = [
	{param:"color", fromColor:"white", toColor:"black"},
	{param:"background-color", random: true, alpha:"10,90"},
	{param:"border-left-color", colorList: ["random", "gold", "black"], alpha: [100, 10, 75]},
	{param:"border-right-color", colorList:["rgb(0,0,100%)", "lime"},
	{param:"border-top-color", colorList:["white","black", "#00FF00", "blue", "rgb(126, 100, 40)"]},
	{param:"border-bottom-color", colorList:["white", "tomato"]}
];
$("tr").colorBlend(myColors);

Version	Date	Links	Status
1.5.0	2008-Apr-11	Download Release notes	Recommended for 1.0.x
1.6.1	2008-Oct-17	Download Release notes	Recommended for 1.2.x

Conway's Game of Life

Last changed: 10 weeks 9 hours ago

The jQuery Life Plugin allows you to easily insert a simulation of the Conway's Game of Life in your web.

Version	Date	Links	Status
1.0.1	2009-Apr-24	Download Release notes	Recommended for 1.3.x

Countdown

Last changed: 1 year 24 weeks ago

A simple yet usefull plugin

It'll countdown time in seconds, untill zero. Then may reload the page.

example:
wait

It will show progressively:
50 secs = 00:50
3600 secs = 01:00:00
86400 secs = 1d 00:00:00
etc.

Version	Date	Links	Status
1.0-beta	2008-Jan-12	Download Release notes	Recommended for 1.0.x

CSS Class-based Animations

Last changed: 28 weeks 3 days ago

You might like this plugin if you can't stand CSS/presentation creeping into your JavaScript through jQuery.animate calls.

Keep presentation where it should be (in linked or inline CSS class definitions) and just animate to and from CSS classes.

Now, you can write:

$('div').animate('.myCssSelectedClass');

instead of:

$('div').animate({
    height: '100px',        //expand down
    opacity: 1              //fade in
//  ...                     //etc, etc.
})
    .find('a')              //now animate the anchor elems inside
        .animate({
            top: 100px,
            left: 100px     // slide in from upper left
//          ...             // etc, etc.
        })
        .end()
    .find('p')              //and the paragraph elems
        .animate({
            top: 200px      // slide in from the top
//          ...             // etc, etc.
        })
//          ...             // and on and on

Version	Date	Links	Status
0.8-min	2008-Dec-16	Download Release notes	Recommended for 1.2.x

ctRotator

Last changed: 33 weeks 2 days ago

An highly customizable item/image rotating script. Supports creating the rotator from various data sources, such as JavaScript object, HTML UL/OL list, RSS feed, Flickr feed. More data sources can be supported with custom bridges.

Preview the plugin: http://test.thecodecentral.com/ajax-rotator/
Full documentation: http://thecodecentral.com/2008/11/12/ctrotator-a-flexible-itemimage-rota...

Call ctRotator with a data source on a selected element:

<ul id="container"></ul>

<script type="text/javascript">
$('#container').ctRotator(dataSource, {
  showCount:5,
  speed:1000
});
</script>

Format of the data source (can be from other sources):

var dataSource = [
{title: 'test', url: 'http://thecodecentral.com', tip: 'Programmer\'s blog for programmers'},
{title: 'test2', url: 'http://thankyouproject.org', tip: 'Fill the World with Thanks'},

Version	Date	Links	Status
0.9-rc-1	2008-Nov-12	Download Release notes	Recommended for 1.2.x

Cursor Message - a Tooltip-like message for any event

Last changed: 38 weeks 2 days ago

Cursor Message is a tooltip-like jQuery plug-in, to show messages near the cursor on any event. You can pass options to cursorMessage() using the following syntax:

$.cursorMessage(message [, options] );

the options object can contain the following properties

offsetX: pixel offset X-axis message from cursor (default 5)
offsetY: pixel offset Y-axis message from cursor (default 5)
hideTimeout: milliseconds to display the message (default 1000)

Example usage on http://www.kingsquare.nl/cursormessage

Version	Date	Links	Status
0.1	2008-Oct-08	Download Release notes	Recommended for 1.2.x

dAnimate

Last changed: 26 weeks 4 hours ago

After searching for a way to delay the firing of animations in jquery, I developed this in order to allow me to achieve it, it is inspired by Karl Swedberg's post http://www.learningjquery.com/2007/01/effect-delay-trick It allows you to specify all the normal animation parameters and then an extra parameter with the delay in it.

dAnimate( params, [duration], [easing], [callback], [delay] )

Default Animation Speed

Last changed: 1 year 26 weeks ago

This is a very simple plugin that allows you to set the default animation duration for all jQuery animations. As of this writing, jQuery 1.2.1 uses a hard-coded value of 400 milliseconds, with no-built in way to set the default (although it is easy enough to get the default.) I needed to be able to set this default globally and on-the-fly for an internal company project, so I decided to do it "the right way" and release it in case anyone else has the same problem.

The plugin adds one function to the global jQuery object (it is not chainable.) It accepts a single parameter, which is any valid animation speed setting.

Calling the function without any parameters or with invalid value will set the animation speed back to the default. The function returns the default animation speed as an integer.

You call the function like this:

$.setDefaultAnimationSpeed("slow");

Version	Date	Links	Status
1.0.1	2007-Dec-28	Download Release notes	Recommended for 1.2.x

Diagonal Accordion!

Last changed: 17 weeks 3 days ago

Yes, thats right, an accordion, but at 45 degrees! It's not very practical in most cases as the content you can fit in is limited...

Version	Date	Links	Status
1.0.0	2009-Mar-03	Download Release notes	Recommended for 1.0.x

DivCorners

Last changed: 3 weeks 3 days ago

This plugin aims to created an easy way to add border layouts to screen content. It includes three functions that can be called after jquery.pack.js and jquery.divcorners.js are loaded.

Use $(expression).dcCreate(properties, bool) to create an instances of a layout.
Use $(expression).dcResize(bool) to resize an instances of a layout.
Use $(expression).dcClear(bool) to remove an instances of a layout.

DivCorners is comprised of jquery.divcorners.js and jquery.divcorners.css, both of which must be linked for desired results.

Please visit the website for a development package. www.roydukkey.com/divcorners

Version	Date	Links	Status
1.5.0	2009-Jun-09	Download Release notes	Recommended for 1.3.x

Draggable Images

Last changed: 33 weeks 3 days ago

Currently, most draggable image plugins use an inline image with absolute positioning and a surrounding clipping area, which in most cases is fine, but in this case it would be a real issue as the zoom plugin uses an absolute positioned container. To get around this I decided to convert the image inside the container to the background image.

For all those people who don't have javascript turned on you just see a clipped image, but those with javascript can move the background image around as if they are dragging it.

Version	Date	Links	Status
1.0.0	2008-Nov-11	Download Release notes	Recommended for 1.2.x

Draw! jQuery drawing plugin.

Last changed: 37 weeks 1 day ago

This plugin was created after noticing Walter Zorn's javascript for drawing shapes on screen with div's.

I've also looked into the drawlibrary plugin, but it has a little too much overhead. Drawlibrary does use the same algorithms as Walter Zorns work as well, but relies on svg files when using Microsoft I.E. This plugin does not.

Here is some example code:

$("#myCanvas").drawRect(10, 10, 20, 20, {color:'blue', alpha: .5});
$("#myCanvas").drawPolygon([100, 100, 90, 30], [20, 30, 40, 60], {color:'#00FF00', alpha: .9});
$("#myCanvas").drawEllipse(100, 200, 40, 40, {color:'orange', stroke: 10});
$("#myCanvas").fillArc(50, 200, 40, 40, 90.0, 180.0, {color:'#336699', alpha: .2});
$("#myCanvas").fillPolygon([150, 300, 90, 30], [20, 30, 40, 60], {color:'yellow', alpha: 1});

My canvas is an empty div tag with id="myCanvas"

Version	Date	Links	Status
1.2.0	2008-Apr-13	Download Release notes	Recommended for 1.0.x
1.3.0	2008-Oct-16	Download Release notes	Recommended for 1.2.x

Animation and Effects

Drop Down Panel script

Drop Down Panel adds a pull down panel to the top of your page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content. Clicking anywhere on the panel again closes it. You can easily customize the height of the Panel, button text (ie: "panel content"), and drop down speed in milliseconds. A plug and play Ajax drop down panel!

Version	Date	Links	Status
1.0	2008-Apr-03	Release notes	Recommended for 1.2.x

Drop Shadow

This plugin creates soft drop shadows behind page elements, including text and transparent images. It accepts options for the horizontal and vertical offsets, amount of blur, opacity, and color. Please look at the demo page for examples.

Find out more

Version	Date	Links	Status
1.6	2007-Dec-20	Release notes	Recommended for 1.2.x

Animation and Effects

DynaCloud

Last changed: 18 weeks 5 days ago

DynaCloud is a jQuery plugin that generates tag or keyword clouds from text on web pages and highlights matching parts once a keyword is clicked.

Several aspects of DynaCloud can be customized.

Stopwords
Limiting the number of tags
Sorting tags
Automatic generation of tag clouds

Version	Date	Links	Status
5.0.0	2009-Feb-22	Download Release notes	Recommended for 1.0.x

Dynamic HTML Canvas Drawing

Last changed: 46 weeks 4 days ago

HTML Canvas API that works in form of tranditional jQuery chains. IE compatibility will require excanvas JS file (available at ExCanvas project), but in FF, Safari, etc, the plugin will work as is.

Plugin is allows for flexible positioning of the canvas HTML tag. Modes over and under (default) will wrap current contents of the box before attaching the canvas, while unshift and push will either prepend or append the newly created canvas tag.

Internally, calling canvas() on a jQuery selector will attach an object containg canvas context, dimensions, and all functions to each DOM element found by the selector, which facilitates jQuery chains.

Version	Date	Links	Status
1.1	2008-Aug-11	Download Release notes	Recommended for 1.2.x

Easing Plugin

Last changed: 1 year 39 weeks ago

Allows you to set custom easing types for standard animations.

By George Smith.

Version	Date	Links	Status
1.2	2007-Oct-04	Download Release notes	Recommended for 1.0.x
1.1.1	2007-Oct-04	Download Release notes	Recommended for 1.1.x

Easy Slide

Last changed: 1 year 32 weeks ago

EasySlide is a small plugins for the jQuery-JavaScript-Library . It's designed to slide you any images inside a container . These container could be any TAG you want, e.g. <p>,<div>.Easily produce your own slideshow for your website or Image . Create a Image Gallery or do an animation.

Cross browser( Tested with IE7 and Firefox 2.0)
Both clickable and auto play slideshow
Pause while mouseover
No extra setup
No other plugins needed
Watermark
Opacity change function (Tested with IE7 and Firefox 2.0)
Speed adjustment
You can edit css change any layout color you like
can add hyperlink or no

Created By Michael Lo

Animation and Effects

Effect Lettrine

Last changed: 17 weeks 1 day ago

This plugin enables an effect "Lettrine", each first letter of paragrah is replace by a corresponding image of the letter.

Version	Date	Links	Status
1.0.0	2009-Mar-05	Download Release notes	Recommended for 1.0.x
1.0.0	2009-Mar-05	Download Release notes	Recommended for 1.3.x

EffectChain

Last changed: 41 weeks 6 days ago

In jQuery all effects are applied simultaneously, to all elements selected by the query, with EffectChain you can apply all jQuery effects (1.2+) in a chain (sequence). ALL effects are supported: hide, show, fadeIn, fadeOut, fadeTo & animate! Moreover with EffectChain you can shuffle the order of the effect on the DOM elements (reverse or random), setup delays between the application of the effect to an element plus many more features, and all these with a minimal footprint!

Version	Date	Links	Status
1.0.0	2008-Sep-13	Download Release notes	Recommended for 1.2.x

Element gradient

Last changed: 1 year 45 weeks ago

This plugin requires the Dimensions plugin and jQuery version 1.1.3+.

It allows you to define a gradient fill and have an element filled with a linear gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

There is a colorGradient plugin which seems similar but takes a collection of elements and applies a gradient to each element, whereas this plugin applies a gradient fill to all matched elements. If you look at our example pages, you can see the differences.

Probably it would be a good idea to merge these two plugins eventually.

Version	Date	Links	Status
1.0.0-beta	2007-Aug-17	Download Release notes	Recommended for 1.0.x

Animation and Effects

Eniac Essentials Detail Expander

Last changed: 11 weeks 1 day ago

EEDE (Eniac Essentials Detail Expander)

This jQuery plugin is meant to show and hide detail sections in your page, using jQuery. It aims to be extremely flexible and simple in use at the same time.

How it works

Create any dom element structure in you page on which the user will click to show an hidden detail-section.
Add an attribute called 'detail' to the main element of the clickable section.
The value of this attribute must be a css-style jQuery selector that references the element(s) to show and hide.
instantiate the detail expander by calling the constructor for theclickable element.

Extra features

the constructor will also accept an option called 'speed'. Any speed indicator, accepted by the jQuery animations is valid. (default=slow)
e.g. "slow", "fast", 0, 1.4

Version	Date	Links	Status
1.2	2009-Apr-16	Download Release notes	Recommended for 1.0.x

epiClock

Last changed: 5 weeks 3 days ago

The epiClock jQuery Plugin allows users to easily create dynamically updating clocks, timers, and stopwatches. Each clock can be styled with custom CSS or images to achieve the proper effect on your page. Users can format the output in any way they desire, as the clock takes formatting strings in a manner similar to that of PHP's date() function. Full documentation and a live demo can be viewed at the sites listed below.

Version	Date	Links	Status
2.1.2	2009-May-26	Download Release notes	Recommended for 1.0.x
2.0.6	2009-Jan-27	Download Release notes	Recommended for 1.2.x
2.1.1	2009-May-12	Download Release notes	Recommended for 1.3.x

Plugins

Search

User login

Browse Plugins

Can't find a Plugin?

Website Bug or Feature Request?