The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Blend : Cross-fade CSS backgrounds

Plugin rate :

jQuery blend is a plugin to cross-fade CSS backgrounds.

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.

This plugin is developed by Jack Moore, the Colorbox plugin owner !

Implementation: 

1. First, include jQuery files

1
2
3
<!-- Js Files -->
<script type='text/javascript' src='jquery.js'></script>  
<script type='text/javascript' src='jquery.blend.js'></script>  

 

2. Write your HTML

1
2
3
4
5
6
7
8
9
<div id="example">
  <h2>Blend Applied</h2>
  <a href="#" id="example_home">Home</a>
  <a href="#" id="example_blog">Blog</a>
  <a href="#" id="example_demo">Demo</a>
  <a href="#" id="example_about">About</a>
  <a href="#" id="example_services">Services</a>
  <a href="#" id="example_contact">Contact</a>
</div>

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.

1
2
3
4
5
// Normal CSS :hover style:
#navHome:hover{background:#f00}
 
// Same CSS with hover class:
#navHome:hover, #navHome.hover{background:#f00}

 

3. Finnaly, call the plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
        $(document).ready(function() {
                /* Format :*/
                $(selector).blend(speed, callback));
 
                /* simple call */
                $("#example a").blend();
 
                /* With options */
                $('a#nav2').blend(600);
                $('a#nav3').blend(300, function(){ alert('hello'); });
        });
</script>
Options: 
speed
Integer
Default : 350 - Speed of the animation
Methods: 
callback
Function
Returns : false - Callback function when animation is finished (during mouseover)
Screenshots

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.3
Current version
2.3
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [0]