Simple Jquery image fade in/out

Its been a long time since the last post. In this one, I’ll show you a very simple jquery slideshow with fade in & fade out effect. I’m posting this very basic jquery slideshow because few of my friends asked me to help out with a very simple fade in and fade out slideshow effect. They even try with others yet, sometimes becomes horrible even when they have a great one. Since then, i suggest them to use this very simple one.
Ok let’s start…

The Scripts & CSS

Line no. 1 is the jquery library file which helps to run any kind of jquery code or functionality. And the next one is the supporting file that is going to help us in rendering the fade in and fade out effect smoothly.

The next script

The speed of the effect can be set by the timeout variable. Its defined in milliseconds and the type can be ‘sequence’ or ‘random’. Finally, the containerheight variable is an optional. But its good to set.

The Last one

The images can be of any number and its enclosed by the ‘<li>’ tag. But as a reasonable number 5 is the normal one.

Its all over and works smoothly now in all the browser. šŸ™‚

This is tested and works in:firefox 4+microsoft IE 8

<<innerfade.js>>

P.S.: featured image courtesy: Nuvola Icon Pack by David Vignoni

Thanks for reading this post and as usual, Iā€™m open to suggestion and critics (positive of course).
Do comment on!

Share

Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.