inOutViewClass plugin for jQuery

If you scroll my blog page up and down and look at it carefully, you will see a fade in/out effect happens while scrolling. To create this effect I develop a jQuery’s plugin called “inOutViewClass”. It checks each matched elements to see whether it’s in the view or not; then add “inViewClass” or “outViewClass” based on its condition.

Default values for ‘inViewClass’ and ‘outViewClass’ parameters are “inView” and “outView”.

[btcode title=”js” lang=”js”]
* inOutViewClass plugin for jQuery
* @param inViewClass:String defines class for matched elements that scroll in view. Default value is “inView”.
* @param outViewClass:String defines class for matched elements that scroll out of view. Default value is “outView”.
(function( $ )
$.fn.inOutViewClass = function(inViewClass , outViewClass)
inViewClass = inViewClass?inViewClass:’inView’;
outViewClass = outViewClass?inViewClass:’outView’;

var viewTop = $(window).scrollTop();
var viewBottom = viewTop+$(window).height();

for ( var i = 0; i < this.length; i++)
var elementTop = this.eq(i).offset().top;
var elementBottom = this.eq(i).height() + elementTop;

if(elementBottom<viewTop || elementTop>viewBottom)
})( jQuery );