/* ----------------------------------------------------------------------------------------------------------//
LINK FX version 1
Author: Phillip Pham
Date: July 14th, 2010
A simple fade between background images on rollover that degrades gracefully without javascript
TODO: Add more effects over time.
//----------------------------------------------------------------------------------------------------------//
HOW TO USE:
===========
linkfx($container, $selector, $fxDuration);
$container = Just put something like class="noJS" on the body tag.
Technically it can be any class wrapping all the elements you want to effect. This
class needs to be added if you want to your css to degrade to :hover rollovers if
javascript is not installed.
$selector = Add something like class="fadefx" to all the links you want to treat.
$fxDuration = How long the effect takes.
HTML:
-----
CSS:
----
.button, .button span.hover { width: 100px; height: 20px; background-image:url(off.gif); background-repeat:no-repeat; }
.noJS .button:hover, .button span.hover { background-image:url(on.gif); }
Javascript:
-----------
// ----------------------------------------------------------------------------------------------------------*/
function linkfx($container, $selector, $fxDuration) {
//Remove the $container class. This is only here to degrade gracefully.
$containerClassName = $container.substring(1, $container.length); //Need to strip the leading "." from the sring
$($container).removeClass($containerClassName);
//Set up selected links
$($selector).each(function(){
$(this).append(""); //This span needs to the same size as the $selector. It gives the illusion that it is on top.
//Make the span hidden and remove all padding/margins so it lines up with the image beneath.
var $span = $('> span.hover', this).css({'opacity': 0, 'padding': 0, 'margin': 0, 'cursor': 'pointer', 'left': 0, 'top': 0});
//Fade opacity in and out
$(this).hover(function () {
$span.stop().fadeTo($fxDuration/4, 1);
}, function () {
$span.stop().fadeTo($fxDuration, 0);
});
});
}