Dynamic Fading Effect Plugin with jQuery and jQuery UI - FadeOver

FadeOver is a jQuery and jQuery UI based plugin that enables you to add dynamic fade in/out effects to html elements like image, text, button,etc. Good for creating dynamic button with smooth fading effects on hover over. FadeOver comes with 4 states (normal, over, active and disabled) and will automatically transition between these states in response to mouse input events.

Basic Usage:

1. Include jQuery library, jQuery UI and FadeOver plugin on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script src="jquery.ui.fadeover.js"></script>

2. Create a container for this widget

<div id="fadeover_1">jQuerScript.Net!</div>

3. The CSS

<style type="text/css">  #fadeover_1 .ui-widget-fadeover-container-div {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background-color: white;
 border: 1px solid black;
 padding-top: 2px;
 padding-bottom: 2px;
 padding-left: 10px;
 padding-right: 10px;
}
#fadeover_1 .ui-widget-fadeover-over {
color: red;
}
#fadeover_1 .ui-widget-fadeover-normal {
color: green;
}
#fadeover_1 .ui-widget-fadeover-active {
color: blue;
}
#fadeover_1 .ui-widget-fadeover-disabled {
color: gray;
}
</style>

4. Call the plugin

<script>
	$('#fadeover_1').fadeover();
</script> 

More Examples:

• CSS-only Example
• CSS Text Shadow Example
• CSS Custom Button
• Image Autosize Example
• Image Example 1
• CSS Blue Flame Example
• Text Example 1
• UI Button Example

---

This awesome jQuery plugin is developed by kieransimkin. For more Advanced Usages, please check the demo page or visit the official website.