Animated Hover is a plugin for jQuery to create animated hover effects. See the demonstration page for examples.

Requirements

Animated Hover depends on jQuery 1.2 or greater, and the Dimensions plugin.

In order to effectively use Animated Hover, the following CSS rules should be applied:

* The parent of the hovered items must have a position (relative or absolute).
* The hovered items should have an explicit z-index. This means they must also have a position (relative or absolute).
* The dynamically created hover element should have a z-index less than the hovered items’ z-index.

Usage

The simplest possible usage is below. This will dynamically create a hover element (which is then styled) whenever the mouse hovers over a list item:

$('ul li').ahover();

The CSS might look something like this:

/* The hovered items' parent */
ul { position: relative; }

/* The hovered items */
ul li {
    position: relative;
    z-index: 100;
}

/* The hover element, dynamically created */
div.ahover {
position: absolute;
z-index: 99;
background: #cef;
}

ahover supports the following options:

* className: The class to give the dynamically created hover element (default: ahover)
* toggleSpeed: The number of milliseconds it takes to perform the “enter” and “leave” animations (default: 75)
* toggleEffect: Either an object of CSS properties to apply for the “enter” and “leave” animations, or an ahover effect name. The following effects are supported:
o width: The hover element’s width will slide to fill the space
o height: The hover element’s height will slide to fill the space (like slideDown)
o both (the default): The hover element’s width and height will both slide to fill the space
* moveSpeed: The number of milliseconds it takes to smoothly slide between hovered elements (defaut: 250)
* hoverEffect: A callable to enqueue when the hover element appears. Used, for example, to add a pulsating animation (default: null)
* easing: The easing to use for all animations (default: swing)

For example, the following will make a looping pulsate effect that slides quickly between items:

$('ul li').ahover({moveSpeed: 100, hoverEffect: function() {
        $(this)
            .animate({opacity: 0.5}, 750)
            .animate({opacity: 1.0}, 750)
            .dequeue();
        $(this).queue(arguments.callee);
    }});

Demo: http://media.brianbeck.com/shared/javascript/jquery-ahover/demo/demo.html
Download: http://jquery-ahover.googlecode.com/files/jquery.ahover.js
Source: http://code.google.com/p/jquery-ahover/wiki/Documentation

Related Listings:

1. Animated Hover using Jquery Animated Hover provides animated transitions between hovered items for any...
2. Crafting an Animated Postcard With jQuery Nicely illustrated banners are…nice. But why not add a little...
3. Kwicks for jQuery – Horizontal Animated Menu Menu of a web page is the most important and...
4. Animated Ajax Delete : jQuery I’m a huge fan of WordPress’ method of individual article...
5. Animated Innerfade Images This plugin for jQuery is an extension to the work...

Do you like this post?

Email: