jQuery Blend
A plugin to cross-fade CSS backgrounds.
Demo
Download
Current version: 2.3 ( Released under the MIT License | Github | Changelog )
Tested in: Firefox 3 & 4, Safari 4 & 5, Opera, Chrome, Internet Explorer 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 needed 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.
Comments
Sondrea month agoReply