jQuery Gradient Animations Plugin

Description

The jQuery Gradient Animations Plugin is a simple plugin for allowing you to animate Css3 linear and radial gradients.

Information

Reporting Bugs

If you find any bugs please don’t comment on this page. Report any bugs through Github.

Requirements

The jQuery Gradient Animations Plugin uses two other plugins:

  • jQuery gradient cssHook. This allows you to use the W3C way of setting gradients for browsers that support it( e.g. Moz, Webkit,  Opera).
  • jQuery Color v2 beta. This allows the plugin to work with colours if different formats (name, rgb, rgba, hsl, hsla).

Both these files come with the download anyway.

Versions

Current Version – 1.0

Links:

Download jQuery Gradient Animations v1.0

Github Page

Usage

Options

.animateGradient(css)
.animateGradient(css, speed)
.animateGradient(css, speed, complete)

css - Gradient you want to animate too. Must be a W3C gradient.
speed - How fast you want the animation to happen, in milliseconds.
        Defaults to 1000.
complete - A function to call once the animation has completed.

Basic Example

$(document.ready(function(){
    $('#elem').animateGradient('linear-gradient(red, blue)');
});

Advanced Example

$(document.ready(function() {
    $('#elem').animateGradient('linear-gradient(red, blue)', 400, function(){
        //Completed
    });
});

Simple as that!

This entry was posted in Projects. Bookmark the permalink.

Comments are closed.