Dynamic Fading Effect Plugin with jQuery and jQuery UI - FadeOver

File Size: 93.8 KB
Views Total: 1466
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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;

4. Call the plugin


More Examples:

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