hoverAnim
/*
* hoverAnim (1.0) // 2008.02.10 // <http://plugins.jquery.com/project/hoverAnim>
*
* REQUIRES jQuery 1.1.2+ <http://jquery.com/>, hoverIntent <http://cherne.net/brian/resources/jquery.hoverIntent.html>
*
* Copyright (c) 2008 TrafficBroker <http://www.trafficbroker.co.uk>
* Licensed under GPL and MIT licenses
*
* hoverAnim make an animation on over, and return to the original position on out.
*
* Sample Configuration:
* $('#element').hoverAnim({width: 500},{speed: 500});
*
* More Config Options:
* speed: Speed for the animation // default: 150
* easing: "swing", // By default jQuery only provide linear and swing easing.
* sensitivity: Sensitivity threshold (must be 1 or higher) // default: 3
* interval: Milliseconds for onMouseOver polling interval // default: 200
* timeout: Milliseconds delay before onMouseOut // default: 300
*
* We can override the defaults with:
* $.fn.hoverAnim.defaults.speed = 500;
*
* @param properties An object with the animation parameters
* @param settings An object with configuration options
* @author Jesus Carrera <jesus.carrera@trafficbroker.co.uk>
*/
Usage sample
HTML:
<div class="a">
a
</div>
<div class="b">
b
</div>
<div class="c">
c
</div>
<div class="d">
d
</div>
CSS:
.a, .b, .c, .d{
float:left;
width:200px;
height:100px;
position:relative;
left:0;
}
.a{
background:#f00;
}
.b{
background:#0f0;
}
.c{
background:#00f;
}
.d{
background:#ff0;
}
JS:
$('.a').hoverAnim({width: 500, height: 700});
$('.b').hoverAnim({width: 500},{easing: 'easeOutElastic', speed: 500});
$('.c').hoverAnim({left: 30},{easing: 'easeInCubic',speed: 700});
$('.d').hoverAnim({height: 400},{sensivity: 3,interval: 500});
a
b
c
d