Generic Animated Hover Effects Using jQuery UI

One generic jQuery function, add the onHover className to any elements, define CSS rules accordingly, and optionally assign data-hover-duration attributes, and create various animated hovering effects.

HTML

<div class="button onHover">Button</div>
<br><br>
<br><br>
<div class="container onHover" data-hover-duration="3000">
    <div class="menuitem onHover" data-hover-duration="500">Menu Item: Hover me</div>
</div>

CSS

body { padding: 10px; font-family: Tahoma; font-size: 0.9em; }

div.button { width: 50px; height: 22px; background-color: #768497; text-align: center; color: #000; clear: both; border: 1px solid gray; cursor: pointer; }
div.button.hover { background-color: #8c9b7a; color: yellow; }

div.container { width: 250px; padding: 3px; background-color: lightgrey; padding: 8px; cursor: default; }
div.container.hover { background-color: red; }

div.menuitem { background-color: #573948; color: pink; text-align: left; padding: 3px 3px 3px 32px; cursor: default; }
div.menuitem.hover { background-color: #efabcd; color: #0000ff; }

JavaScript

var Page = Page || {};


Page.applyHoverFX = function () {
    $('.onHover').hover(
        function() {
            $(this)
                .stop(true, true)
                .toggleClass('hover', $(this).data('hover-duration') || 500);
        }
    ).removeClass('onHover');
};


$(document).ready(Page.applyHoverFX);