The hoverFlow Plugin

Setup

Make sure that you have the jQuery and hoverFlow JavaScript files included in your document like so:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.hoverflow.js"></script>

Also make sure that the jQuery-method is called when the DOM is ready, either by putting your scripts at the bottom of the document or by using the document.ready() hook:

$(document).ready(function() {
  // put your code here
});

Basic Usage

Typically, you use the hoverFlow()-method within a hover event binding as you would use jQuery's own animate()-method. Both take the same arguments, except that the hoverFlow()-method additionally needs to have the event type as its first argument.

$('.demo1 .anim_queue_example a')
  .hover(function(e) {
    $(this).hoverFlow(e.type, { left: 20 }, 'fast');
  }, function(e) {
    $(this).hoverFlow(e.type, { left: 0 }, 'fast');
  });

It's easy to get the event type since jQuery passes the whole event object to the bound function. You only have to define an alias in the function definition (called e in the code above) and than get e.type. Having that in mind, the following code does exact the same as the code above, but without using the event object:

$('.demo1 .anim_queue_example a')
  .hover(function() {
    $(this).hoverFlow('mouseenter', { left: 20 }, 'fast');
  }, function() {
    $(this).hoverFlow('mouseleave', { left: 0 }, 'fast');
  });

Usage without hover()

It's not required to use hoverFlow() inside a hover event binding. The plugin accepts the follwing event types: mouseover, mouseout, mouseenter, mouseleave (with jQuery's hover() function using mouseenter/-leave internally).

$('.demo2 .anim_queue_example a')
  .bind('mouseover', function(e) {
    $(this).hoverFlow(e.type, { left: 20 }, 'fast');
  }).bind('mouseout', function(e) {
    $(this).hoverFlow(e.type, { left: 0 }, 'fast');
  });

Method arguments

jQuery has two different interfaces for its animate()-method: animate(params, duration, easing, callback) and animate(params, options) The hoverFlow plugin accepts both versions, so that you can easily use it as a replacement for your animate() calls. In both cases, however, the hoverFlow()-method expects the event type as its first parameter.

$('.demo3 .anim_queue_example a')
  .hover(function(e) {
    $(this).hoverFlow(e.type, { left: 20 }, {
      duration: 600, 
      complete: function() {
        var $this  =$(this);
        var count = parseInt($this.text(), 10);
        $this.text(isNaN(count) ? 1 : (count + 1));
      }});
    }, function(e) {
      $(this).hoverFlow(e.type, { left: 0 }, 'fast');
    });

There is one limitation when using the options hash: You cannot set the queue value to true (since the plugin requires this value to be false).

Chaining

Like (almost) every other jQuery method, the hoverFlow-method is completely chainable.

$('.demo4 .anim_queue_example a')
  .hover(function(e) {
     $(this).hoverFlow(e.type, { left: 20 }, 'fast').css('backgroundColor', '#99CCFF');
  }, function(e) {
    $(this).hoverFlow(e.type, { left: 0 }, 'fast').css('backgroundColor', '#000');
  });

Live()

The hoverFlow plugin also works with live() event binding as introduced in jQuery 1.3. However, as of jQuery 1.3.2, the mouseenter and mouseleave events are not supported yet with live().

Add Menu Item