Web Applications

Blend

A jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds. (1.4KBs)

Demonstration

Tested In: Firefox 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
Disabled for FF2 Users due to the background-position property bug.

Released under the MIT License.

Instructions

In addition to your regular CSS ':hover' style, a class of 'hover' must be added for targeted elements. This is required because there is no way for JavaScript to detect the CSS ':hover' styles, which are essential to this plugin.

Normal CSS :hover style: #navHome:hover{background:#f00}

Same CSS with hover class: #navHome:hover, #navHome.hover{background:#f00}

The blend() function takes a key/value object and an optional callback.

Format: $('selector').blend({key:value, key:value});

Example: $('ul#nav a').blend({speed:300});

A page of examples is included with the download, or you can view them here.

Key	Default	Description
speed	500	Sets the speed of the blend effect, in milliseconds.
opacity	1	Set the initial height, prior to any content being loaded.
target	false	This takes in a jQuery selector that can be used to change the target of the blend effect. Example: $("#downloadLink").blend({target:"#downloadButton"});
pulse	false	If true, pulse will cause the blend animation to loop.
active	false	If true, the blend effect will run as if the visitor is mousing-over it.
top	false	If true, the hover state will appear on top of the content inside of the target element.
reverse	false	If true, flips the default and hover CSS backgrounds.

Limitations & IE6 Compatibility

Blend may or may not work for your specific CSS and is intended to be used with block elements or inline elements with 'display:block', but may work for inline elements depending on the situtation.

IE6 does not support class chaining. Since Blend adds a class of 'hover', this may result in an incorrect background for CSS-sprites if the element had a pre-existing class that the background properties are affected by. Example: '.home.hover' may not work in IE6 if CSS sprites are in use, '#home.hover' would work fine however.

Author

Hi, I'm Jack Moore and I'm the designer/developer for this project and this website. You can follow me on twitter if you are interested in updates to this or my other work.

If you are interested in contracting Color Powered to assist with a project, jQuery or otherwise, contact Alex or myself.

Help

Email me at jack@colorpowered.com if you discover any problems with this plugin.