HoverTransitions - jQuery

HoverTransitions allows you to create numerous transition animation effects for webpage elements. The effects are performed by breaking the element into smaller boxes and animating the appearance of each of them according to different patterns and effects. The effects occur when events are performed. All animations are customisable.

A Variety of Patterns

The following are the pattern effects that can be applied. The number of rows and columns can be specified. As you can see all the animations go in reverse when the mouse is moved out of the element.
RegularSpiralDiagonalCrossing
Press Press Press Press
Corners AltSkip RowsSkip ColumnsChecks
Press Press Press Press
ZipRandomCornersWave
Press Press Press Press

Control the Speed

The speed of the pattern (the delay between each box) can be manipulated and so can the speed at which an individual item appears and disappears.
Press Press Press

Show and Hide Effects

Every pattern can be animated using a number of effects to show and hide the boxes.
FlyFadePuff
(Can be processor
intensive)
GrowSliding Doors
Horizontal
Press Press Press Press Press
Sliding Doors
Vertical
Alt Slide
Vertical
Alt Slide
Horizontal
Slide
(U, D , L & R)
Instant
Press Press Press Press Press

Fly Effects

The 'Fly' effect can be manipulated in a number of ways. The flight distance, speed and direction can be manipulated.
Single Direction
(U, D , L & R)
Two Directions
(U, D , L & R)
RandomSplit Vertical
(& Horizontal)
Alt Horizontal
(& Vertical)
Press Press Press Press Press

Mix the Effects

Show and hide effects can be mixed for any element.
Show - Fade
Hide - Fly Split Horizontal
Press

Flip and Rotate the Patterns

Patterns can be flipped horizontally, vertically or both. All patterns can be rotated.
NormalFlip HorizontalFlip VerticalRotate
Press Press Press Press

Reflect the Patterns

Some patterns can be reflected in two or four directions.
NormalReflection
Press Press

Event Handling

Click and hover events can easily be implemented in different ways to start and stop the animations. A single control element can be used to control the animation of many other elements.
Click
(togggle)
Hover altClick altOne Way
Press Press

Hover on me!
Press

Press

Use on a Varity of Elements

The plugin can be used with different sorts of elements such as links, buttons and other HTML objects. All element styles can be customised.

Press the


Simple to Use

It is very simple to implement any of the effects. Below is the amount of jQuery code needed to implement the following effect (HTML & CSS code not shown):

Press

$('#id').hover_transitions({
   innerHTML_two : "Me",
   background_color_two: "#ff286c",
   pattern : "spiral"
});

Compatibility

This plugin uses jQuery 1.7 and is compatible with all modern browsers including Internet Explorer 7-9.

Future Updates and Support

Suggestions for extra features and updates are welcome. All new updates will be free of charge and free support will be given to purchasers.
© A. H. Rahim 2012