highlightFade

OK, so this plugin does the yellow fade and then some. This is version 0.7 and unless I decide to add e-mail support I'm done with this plugin. The current revision supports the following features:

• Fading from one colour to any other at any speed and interval of colour update with a customizable colour progression tactic.
• For the sake of brevity, the settings Object argument may be replaced with a start colour value for simple highlightFades. For example: $('p.red').highlightFade('red') to do a red highlightFade.
• Many setting defaults are customizable via a global object which the highlightFade plugin consults when determining defaults. For example if you wanted all your highlightFades to by default last for 2 seconds you would set $.highlightFade.defaults.speed to 2000 and you could forego specifying it in any of your plug-in calls.
• The following properties can be supplied to the settings Object (the first and only argument of the highlightFade plug-in call):

  • start

    colour

    color

    The colour from which the highlightFade effect begins. Defaults to rgb(255,255,128). Default is customizable. Acceptable values are:

    1. A JavaScript array containing three numbers between 0 and 255 (ie [255,255,255]).
    2. An RGB 'function call syntax' string. either interger or percentage float form. (ie rgb(255,255,255) or rgb(100%,100%,100%))
    3. An RGB hex value. Either short or long form. (ie #FFF or #FFFFFF)
    4. A W3C standard colour name string as defined at W3Schools. (ie 'white', 'blue', 'red', 'black', et. al)

  • end

    The colour to which the highlightFade effect transitions. If an end colour is specified, the background colour does not get regressed to it's original value after the effect ends. Defaults to the current background colour of the element. Default is customizable.

  • speed

    The speed at which the highlightFade effect transitions. Defaults to the default value of $.speed. Default is customizable.

  • iterator

    The iteration technique by which the colours transition. Can be either a string value denoting a built-in iterator (linear, sinusoidal, or exponential) or a function with the same argument order of the built-in iterators. The arguments of the iteration function are start, end, totalIterations, currentIteration. Default is customizable.

  • attr

    The type of highlightFade to enact. That is, the element's visible colour cue you wish to modify. Some possible values include borderColor, borderLeftColor, backgroundColor, etc. Default is backgroundColor. There are two known and essentially unfixable (unless a JS guru helps me out) issues regarding border settings. First of all, because there is a bug in the Gecko engine (used in firefox and others), the borderColor attribute will not always be available and when it is available, it is often in a form which cannot be parsed by the plug-in. Because of this, to ensure the highlightFade is a smooth transition back to the original border color, you must specify the end color value. These exceptions can be ignored if working on a white background. Secondly, when applying multiple border effects, (for example, one universal border effect while simultaneously running a single border effect) be sure to run the edge specific effects (e.g. borderLeftColor) after the generic effect to ensure the generic doesn't override the specific. Even still, those effects are troublesome at best. Additionally (and fairly obviously), if you do not have a visible border specified, there will be no visible effect.

  • interval

    The time interval between background colour updates. This can be increased to make the colours transition in a more discrete form (and reduce the work the JavaScript has to do) and decreased to make the transition more continuous. Default is 50 milliseconds. Default is customizable.

  • complete

    A function to be called after the effect has finished. If left undefined, no function is called. Default cannot be customized.

  • final

    A string value to which you may set the background-color style of the element after the effect has finished. This property is very esoteric and only really useful when you are attempting to remove styles applied from previous highlightFades. A purpose of it can be seen by clicking on the colour shifting header tag at the top of the page. Mouseover events cause the element to fade to a new background colour and clicking moves to its parent elements background colour and then removes the style attribute. If the final property is not specified as an empty string (ie inherit the parent element's background colour), then if the parent element changes background colour, the child will not follow suit and instead retain the ending colour of the previous highlightFade effect. Default cannot be customized.

I planed on putting demos on their own page with separate pages displaying different features and aspects of the plug-in but seeing as I'm absurdly lazy and my school year just started up, I doubt that's happening anytime soon. Additionally, recent improvements to the jQuery plug-in Interface allow it to do what my plug-in does and more, so it'd be best to use that for more advanced work. The code can be downloaded here.