Google

Wednesday, February 20, 2008

Jquery fade



    • 1)Rollover the box to stop fading
    • 2)On mouseout the fading will start again
    • 3)This is a simple script. Just include the js and call below script. Have fun :).

example:

$(document).ready(function(){ $(".fade").fademe({ speed: 1000, timeout: 3000 });

Code:
Download fademe.js

jQuery.fn.fademe= function(options) {
this.each(function(){
var settings = {
speed: 1000,
timeout: 3000
};
if(options) {
jQuery.extend(settings, options);
}
jQuery.fn.fademe.next(this,settings);
$(this).hover(function(){jQuery.fn.stop()},function() {jQuery.fn.start(this,settings)})
});
}
jQuery.fn.start=function(element,settings) {
jQuery.fn.fademe.st =setTimeout(function() {jQuery.fn.fademe.next(element) } ,settings.timeout);
return false;
}
jQuery.fn.stop=function() {
clearTimeout(jQuery.fn.fademe.st);
return false;
}
jQuery.fn.fademe.next=function(element,settings) {
if($(element).children("li:visible:first").length) {
obj=$(element).children("li:visible:first")
$(obj).fadeOut(settings.speed,function() {
$(this).hide();
$($(obj).siblings().find($(obj).next("li"))[0]).fadeIn(settings.speed);
if($(element).children("li:visible").length==0) {
$(element).children("li:first").show();
}
} );
}
jQuery.fn.fademe.st =setTimeout( function() {jQuery.fn.fademe.next(element,settings) },settings.timeout);
}