app/assets/javascripts/hoverPulse.js
(function($) {
$.fn.hoverpulse = function(options) {
// in 1.3+ we can fix mistakes with the ready state
if (this.length == 0) {
if (!$.isReady && this.selector) {
var s = this.selector, c = this.context;
$(function() {
$(s,c).hoverpulse(options);
});
}
return this;
}
var opts = $.extend({}, $.fn.hoverpulse.defaults, options);
// parent must be relatively positioned
this.parent().css({ position: 'relative' });
// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });
this.each(function() {
var $this = $(this);
var w = $this.width(), h = $this.height();
$this.data('hoverpulse.size', { w: parseInt(w), h: parseInt(h) });
});
// bind hover event for behavior
return this.hover(
// hover over
function() {
var $this = $(this);
$this.parent().css('z-index', opts.zIndexActive);
var size = $this.data('hoverpulse.size');
var w = size.w, h = size.h;
$this.stop().animate({
top: ('-'+opts.size+'px'),
left: ('-'+opts.size+'px'),
height: (h+2*opts.size)+'px',
width: (w+2*opts.size)+'px'
}, opts.speed);
},
// hover out
function() {
var $this = $(this);
var size = $this.data('hoverpulse.size');
var w = size.w, h = size.h;
$this.stop().animate({
top: 0,
left: 0,
height: (h+'px'),
width: (w+'px')
}, opts.speed, function() {
$this.parent().css('z-index', opts.zIndexNormal);
});
}
);
};
$.fn.hoverpulse.defaults = {
size: 20,
speed: 200,
zIndexActive: 100,
zIndexNormal: 1
};
})(jQuery);