$.fn.extend({ opacity: function(options){ var o = { loop: '', controls: '', speed: '', gap: 500, conClass: '' }; $.extend(o,options); var loops = $(o.loop,this), controls = $(o.controls); if(loops.length < 2) return; loops.filter(':not(:first)').css('opacity', '0'); var that = this; var method = { timer: null, star: function(n){ method.timer = setInterval(function(){ method.play(n); },o.gap); }, play: function(n){ var current = method.getCurrent(), next = method.getNext(n); loops.stop(true,true); current.animate({ opacity: 0},o.speed,'linear',function(){ $(this).removeClass('on'); $(this).addClass('hidden'); }); next.animate({ opacity: 1},o.speed,'linear',function(){ $(this).removeClass("hidden"); $(this).siblings().each(function(){$(this).addClass("hidden");}); $(this).addClass('on'); }); controls.removeClass(o.conClass); controls.eq(next.index()).addClass(o.conClass); }, stop: function(){ clearInterval(method.timer); }, getCurrent: function(){ return loops.filter('.on'); }, getNext: function(n){ if(n) return n; var c = method.getCurrent(), nn = c.next(); if(!nn.length) nn = loops.first(); return nn; } }; method.star(); this.hover( function(){ method.stop() }, function(){ method.star() } ) var bTimer = null; controls.live('mouseenter',function(e){ bTimer = setTimeout(function(){ var target = $(e.currentTarget); if(target.is('.'+o.conClass)) return; var next = loops.eq(target.index()); method.play(next); },o.speed); }); controls.live('mouseleave',function(e){ clearTimeout(bTimer); }); } })