arrowFade

school project -> JQuery plugin that calls a function that lets you fade elements on hovering

Synopsis

This is a plugin used to let a certain element change appearance when hovering with the pointer. It runs on top of JQuery.

Code Example

//this is to CALL the plugin in your html (use script tags)
$(function() 
{
$(".fp-controlArrow").arrowFade({opacity: 0.5, speed: "fast", toOpacity: 1});
});
//this is to call the function in your html (use script tags) 

//set defaults which shall be overwritten with CALLing the plugin in the script tags
(function($) { //invoked function expression
$.fn.arrowFade = function(options)
$.fn.arrowFade = function(options)
{
var settings = $.extend(
{
        speed: "slow",
        opacity: 0.1,
        toOpacity: 0.5
    }, options );
//set defaults which shall be overwritten with CALLing the plugin in the script tags

$(this).fadeTo(settings.speed, settings.opacity); // fadeTo values 

this.mouseenter(OnEnter).mouseleave(OnLeave); // On mouseenter -> OnEnter function, On mouseleave -> OnLeave function.

function OnEnter() //Execute when pointer enters.
{
    $(this).fadeTo(settings.speed, settings.toOpacity); //Sets opacity to toOpacity value.
}
function OnLeave() //Execute when pointer leaves.
{
    $(this).fadeTo(settings.speed, settings.opacity); //Sets opacity back to mouseleave value.
}
}
})(jQuery); //invoked function expression

Motivation

The reason this JQuery plugin exists is that it can save time and space if you repeat the hover on multiple elements(for instance). Your code will be cleaner, and easier to read. Nice and tidy !

Installation

Don't forget to include plugin.js and the jquery library: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js.

You could also download the JQuery library and add it just like plugin.js.

Put this plugin reference under your head but inside the body tags.

($(function() 
{
$(".fp-controlArrow").arrowFade({opacity: 0.5, speed: "fast", toOpacity: 1});
});
)  

That's all folks !

API Reference

http://dirkkersten.com/#secondPage/2

Take a look at the .fp-Controlarrow. Its implemented on that specific class.

.fp-controlArrow is generated by another library BUT it should be able to work on any other element.

Just change ".fp-controlArrow" to "#someIdInYourHtml" for instance(You must have an element in your html that fits this id).

• .fp-controlArrow (class) is selected to execute the arrowFade function upon, you can replace this with any other element to hover over
• opacity: 0.5 : onmouseleave value
• speed: "fast" : can also be "slow" for instance, or a certain unit in milliseconds, make sure to remove the "" when using milliseconds
• toOpacity : opacity value on mouseenter

Problem ? For questions you can email me at: [email protected]. Please dont spam, i am willing to help out.

License

Open source.