Fade elements in and out with the InnerFade javascript plugin. Its purpose is to fade “any element inside a container in and out” and it relies on jQuery to do its magic. InnerFade is a lightweight plugin of only 8 kb, so it won’t bog down your pages.
Any group of elements can be faded in and out with the InnerFade plugin as long as they are inside a container that is targeted by the first line of the script. Example elements that can be faded in and out are links in an unordered or ordered list, textual list items, or paragraphs in a div.
- A. Eat Right – It’s the easiest medicine to take.
- B. Buy Less Stuff – You don’t really need it, do you?
- C. Recycle Everything – Save the Earth from humans.
- D. Laugh Every Day – It helps to keep things in perspective.
- E. Help One Another – Some day you’ll need a little help, so spread good karma.
- F. Keep Smiling – It releases happy endorphins and makes you look great, too!
Target specific classes or ids for the right effect. Using the InnerFade plugin with jQuery is a simple way to show a countdown clock where one number fades out and the next one in the sequence fades in.
A news ticker, like the one above, can be created by fading in and out headlines for each news item. Each headline could be a link to the complete story. The headlines could be marked up as list items, like this list of good ideas:
- A. Eat Right - It's the easiest medicine to take.
- B. Buy Less Stuff - You don't really need it, do you?
- C. Recycle Everything - Save the Earth from humans.
- D. Laugh Every Day - It helps to keep things in perspective.
- E. Help One Another - Some day you'll need a little help, so spread good karma.
- F. Keep Smiling - It releases happy endorphins and makes you look great, too!
The easiest way to use the InnerFade plug is to accept the default settings, as we did above, and call it with a minimum of effort like so:
jQuery(document).ready(function($) {
$('#good_ideas').innerfade();
});
There are only a handful of options and changing them is fairly simple. The type of animation can be set to ‘fade’ or ‘slide’. The speed of the fading or sliding effects is set in milliseconds or with the strings ‘slow’, ‘normal’, or ‘fast’. Timeout is the time between animations in milliseconds. The type of slideshow is set using the strings ‘sequence’, ‘random’, or ‘random_start’. The height of the container element can be set in px, em, %.
Default Settings:
animationtype: fade speed: normal timeout: 2000 type: sequence containerheight: auto runningclass: innerfade
Now that you know you can call the javascript plugin and use it with the default settings, try changing the settings for different effects. For example, try sliding the elements slowly in and out of the 45px tall container in random order with a 3 second pause.
$(document).ready(
function() {
$('.group2fade').innerfade({
animationtype: slide,
speed: 'slow',
timeout: 3000,
type: 'random',
containerheight: '45px'
});
}
);
The InnerFade plugin handles all the hiding of elements until viewed, so without javascript enabled, the visitor will see everything on the page. Use a <noscript> method to offer alternative content to browsers with javascript turned off and put it in the html document just before the closing body tag.
InnerFade plugin can be used for simple slideshows too. The only caveat is to make sure images are of the same size or the bottom edges of larger pics will be seen behind the stack of images.