Blend

A small (1kb) background-merging plugin for jQuery

Demo

Download

Current version: 2.2 ( Released under the MIT License | Github | Changelog )
Tested in: Firefox 3 & 4, Safari 4 & 5, Opera, Chrome, Internet Explorer 6, 7, 8, 9.

About

This is an effect I found myself coding repeatedly for sites, so I decided to turn it into a plugin that could be quickly implimented. It works by creating a layer in your HTML element that sits between the content and the background, which is faded out on mouse-over events.

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 read the CSS ':hover' styles. However, JavaScript can add a class to an element and then read the style off that element.

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

Usage

// Format:
$(selector).blend(speed, callback);

// Examples:
$('a#nav1').blend();
$('a#nav2').blend(600);
$('a#nav3').blend(300, function(){ alert('hello'); });

Hey You

Follow me on Twitter, Github, or RSS. Why should you? I'm meticulous and have a lot of free time. Sometimes good things come out of that.