CyclicFade jQuery Plugin
This is the home page for the CyclicFade jQuery plugin.
CyclicFade is a glorified blink effect. The <blink> tag was so annoying for web users that it was crossed out of the HTML specification. However sometimes you want to draw attention (or your clients wants it) to some text or area of a web page.
CyclicFade lets you define any arbitrary series of cycles of fading-in and out, on any element. Each cycle defines the opacitity when “on” and when “off”, as well as the time the element will be shown “on” and “off”, and the time taken to transition from “off” to “on” and from “on” to “off”. As said above, you can specify a number of different such cycles to be executed one after the other as a complete sequence on a given set of elements; and you can then have this sequence repeated any number of times, from 1 to infinity.
To understand the parameters passed to CyclicFade, consider the following code example:
$("#myid").cyclicFade({
repeat: 0,
params: [
{fadeout:100, stayout:300, opout:0, fadein:100, stayin:3000, opin:0.5},
{fadeout:100, stayout:300, opout:0, fadein:100, stayin:300, opin:0.75},
{fadeout:100, stayout:300, opout:0, fadein:100, stayin:300, opin:1.0}
]
});
This code makes the element whose id is “myid” fade in and out 3 times; fading out takes 100 ms, fading in takes 100 ms, and the elements remains faded out for 300 ms and faded in for 300 ms, except on the first cycle of the sequence where it is on for 3,000 ms. Also, the opacity when faded-out (i.e. when “off”) is 0, whereas the opacity when faded-in or “on” varies; it is 0.5 on the first cycle, 0.75 on the second cycle, and 1.0 on the third cycle. The sequence then repeats, indefinitely (because the “repeat” property is set to 0).
CyclicFade was developed and tested using jQuery version 1.3.2.
View the plugin code: jquery.cyclic-fade.js
There are a few examples here. You can download the plugin and samples as a zip archive or a tarball.
For comments and support, please use the comments form below (registration needed).
