Code for Masked Slider Plugin

Following is the code for the masked slider plugin. Just copy the code and paste it in a javascript file.


var timer = null;

(function($) {
$.fn.maskedSlider = function(options) {

var defaults = {
stripHeight: 50,
topSliderColor: 'gray',
bottomSliderColor: 'gray',
opacity: 0.6,
duration: 1500,
horizontal: true
};

var options = $.extend(defaults, options);
var flag = true;
var element = $(this).attr("id");
var elementWidth = $(this).width();
//if you want the paddding and border to be included in the width then uncomment the following lines
/*var elementWidth = $(this).width() +
parseInt($(this).css("padding-left"),10) +
parseInt($(this).css("padding-right"),10) +
parseInt($(this).css("border-left-width"),10) +
parseInt($(this).css("border-right-width"),10);
*/
var elementHeight = $(this).height();
//if you want the paddding and border to be included in the height then uncomment the following lines
/*var elementHeight = $(this).height() +
parseInt($(this).css("padding-top"),10) +
parseInt($(this).css("padding-bottom"),10) +
parseInt($(this).css("border-top-width"),10) +
parseInt($(this).css("border-bottom-width"),10);
*/
var topDivId = element + "_top";
var bottomDivId = element + "_bottom";
var leftDistance = 0;
var topDistance = 0;

$(this).css("position", "relative");
$(this).append("

");
$(this).append("

");

/*Settings for the top/left slider*/
$("#" + topDivId).css({
"position": "absolute",
"background-color": options.topSliderColor,
"opacity": options.opacity,
"-moz-opacity": options.opacity,
"-khtml-opacity": options.opacity,
"left": leftDistance,
"top": topDistance
});

if (options.horizontal) {
$("#" + topDivId).css("width", elementWidth);
$("#" + topDivId).css("height", 0);
}
else {
$("#" + topDivId).css("height", elementHeight);
$("#" + topDivId).css("width", 0);
};
/*end settings for the top/left slider*/


/*settings for the bottom/right slider*/
$("#" + bottomDivId).css({
"position": "absolute",
"background-color": options.bottomSliderColor,
"opacity": options.opacity,
"-moz-opacity": options.opacity,
"-khtml-opacity": options.opacity
});

if (options.horizontal) {
$("#" + bottomDivId).css({
"height": elementHeight - options.stripHeight,
"width": elementWidth,
"left": leftDistance,
"top": topDistance + options.stripHeight
});
}
else {
$("#" + bottomDivId).css({
"height": elementHeight,
"width": elementWidth - options.stripHeight,
"left": leftDistance + options.stripHeight,
"top": topDistance
});
};
/*end settings for the bottom slider*/

timer = setInterval(function() {
if (flag) {
flag = false;
if (options.horizontal) {
$("#" + topDivId).stop().animate({
height: elementHeight - options.stripHeight
}, options.duration);
$("#" + bottomDivId).stop().animate({
height: 0, top: topDistance + elementHeight
}, options.duration);
}
else {
$("#" + topDivId).stop().animate({
width: elementWidth - options.stripHeight
}, options.duration);
$("#" + bottomDivId).stop().animate({
width: 0, left: leftDistance + elementWidth
}, options.duration);
};
}
else {
flag = true;
if (options.horizontal) {
$("#" + topDivId).stop().animate({ height: 0 }, options.duration);
$("#" + bottomDivId).stop().animate({
height: elementHeight - options.stripHeight,
top: topDistance + options.stripHeight
}, options.duration);
}
else {
$("#" + topDivId).stop().animate({ width: 0 }, options.duration);
$("#" + bottomDivId).stop().animate({
width: elementWidth - options.stripHeight,
left: leftDistance + options.stripHeight
}, options.duration);
};
};
}, options.duration);

};
})(jQuery);


(function($) {
$.fn.stopSlider = function() {
clearInterval(timer);
}
})(jQuery);



You can see the demo at: http://calyan.co.cc/Demo.php