一个在jQuery 基础的CSS 背景动画效果插件。
测试环境: Firefox 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
不兼容Firefox2，是由于 background-position 属性 bug.
Released under the MIT License.
除了你常用的CSS ‘:hover’ 样式， 一个‘hover’ 样式必须要添加到目标元素。这是必须的，因为 JavaScript 还没有办法能探测到 CSS 的 ‘:hover’ 样式，对于这个插件是必须的。
正常的 CSS :hover style: #navHome:hover{background:#f00}
和 hover class 同样的 CSS : #navHome:hover, #navHome.hover{background:#f00}
blend() 函数带有一个 key/value 对象和一个 callback 选项
格式: $('selector').blend({key:value, key:value});
这个页面的上面有很多示例。
| Key | Default | Description |
|---|---|---|
| speed | 500 | 设置 blend 效果的速度，单位毫秒 |
| opacity | 1 | 在内容没有加载之前，初始化高度 |
| 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. |
Blend 或许和你某些CSS不兼容， 他需要元素为盒装或者是被定义了“display:block”的内联元素。但是在使用内联元素的时候还是要看实际情况而论。
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.