lupina

Olá pessoal! Preciso de uma força. Tenho aqui um banner dinâmico em JQuery. Ele está funcionando bem no geral, o único problema é quando o usuário sai com o mouse da opção que ele selecionou e aponta o mouse para dentro da imagem, a seta escapa pra cima e a área da imagem exibida fica em branco, quando deveria ficar estática na última opção que o usuário selecionou. Como resolver? Obrigada desde já! Pra ver o banner funcionando, acessem: http://www.plastivida.org.br/2009/Default2.aspx (área de Destaque). Para testar, passem o mouse sobre Isopor, por exemplo, e levem o mouse até a figura. visite.js jQuery.easing['jswing']=jQuery.easing['swing']; jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d) {return jQuery.easing[jQuery.easing.def](x,t,b,c,d)},easeInQuad:function(x,t,b,c,d) {return c*(t/=d)*t+b},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b},easeInOutQuad:function(x,t,b,c,d) {if((t/=d/2)<1) return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b},easeInCubic:function(x,t,b,c,d) {return c*(t/=d)*t*t+b},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b},easeInOutCubic:function(x,t,b,c,d) {if((t/=d/2)<1) return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b},easeInQuart:function(x,t,b,c,d) {return c*(t/=d)*t*t*t+b},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b},easeInOutQuart:function(x,t,b,c,d) /*{if((t/=d/2)<1) return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b},easeInQuint:function(x,t,b,c,d) {return c*(t/=d)*t*t*t*t+b},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b},easeInOutQuint:function(x,t,b,c,d) */ {if((t/=d/2)<1) return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b},easeInSine:function(x,t,b,c,d) {return-c*Math.cos(t/d*(Math.PI/2))+c+b},easeOutSine:function(x,t,b,c,d) {return c*Math.sin(t/d*(Math.PI/2))+b},easeInOutSine:function(x,t,b,c,d) {return-c/2*(Math.cos(Math.PI*t/d)-1)+b},easeInExpo:function(x,t,b,c,d) {return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b},easeInOutExpo:function(x,t,b,c,d) { if(t==0)return b; if(t==d)return b+c; if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b},easeInCirc:function(x,t,b,c,d) {return-c*(Math.sqrt(1-(t/=d)*t)-1)+b},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b},easeInOutCirc:function(x,t,b,c,d) {if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b},easeInElastic:function(x,t,b,c,d) { var s=1.70158; var p=0; var a=c; if(t==0)return b; if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/3}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)) { a=c; var s=p/3}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},easeInOutElastic:function(x,t,b,c,d) { var s=1.70158; var p=0; var a=c; if(t==0)return b; if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)) { a=c; var s=p/3}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},easeOutBack:function(x,t,b,c,d,s) {if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},easeInBounce:function(x,t,b,c,d) {return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b},easeOutBounce:function(x,t,b,c,d) {if((t/=d)<(1/2.75)) {return c*(7.5625*t*t)+b} else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b} else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b} else {return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b; return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b}}); // //Featured function move_slider(i) { step = i; $('#controls li').removeAttr('style'); $('#controls li:eq(' + i + ')').css({color: '#FFF'}); $('#slider').stop().animate({ top: -1 * (i - 1) * 240 }, 500, 'easeOutExpo'); $('#arrow').stop().animate({ top: 1 * (i - 1) * 50 }, 500, 'easeOutExpo'); } var pilot = '', step = 1; function auto_pilot() { if(step < 3) { move_slider(step + 1); } else { move_slider(1); } } move_slider(1); function restart() { pilot = window.setInterval(auto_pilot, 10000); } restart(); $('#featured').hover(function(){ clearInterval(pilot); }, function(){ restart(); }); $('#featured').each(function() { $('#controls li').live('mouseenter', function() { var i = $(this).index(); i = parseInt(i,10); move_slider(i); }); }); css #main{margin:25px 0;overflow:hidden; font-family:Tahoma; border:none;outline:none;padding:0;vertical-align:baseline;} #esq-sup{width:20px; height:25px; margin-top:24px; margin-left:0px; position:absolute; z-index:3; float:right;} #esq-inf{width:20px; height:25px; margin-top:152px; margin-left:0px; position:absolute; z-index:3; float:right;} #dir-sup{width:20px; height:25px; margin-top:24px; margin-left:530px; position:absolute; z-index:3; float:right;} #dir-inf{width:20px; height:25px; margin-top:152px; margin-left:530px; position:absolute; z-index:3; float:right;} #main #section{float:left;margin:0 0 0 0;overflow:hidden;width:550px;} #main #section .share strong{float:left;padding:2px 5px 0 0;} #main #featured{height:150px;overflow:hidden;position:relative;} #main #featured ul{background:url(../images/js-pontoverde.png);font-size:14px;list-style:none;position:absolute; top:-15px; right:0;width:50px;z-index:2;} #main #featured ul #arrow{background:url(../images/js-seta.png) no-repeat bottom left;left:-20px;position:absolute;width:120px;z-index:1;} #main #featured ul li{background:transparent;cursor:pointer;height:50px;line-height:50px;position:relative;left:-20px;width:140px;z-index:2;} #main #featured #slider{position:absolute;z-index:1;} #main #featured .frame{height:240px;overflow:hidden;position:relative;} #main #featured .frame img{height:auto;width:550px;} #main #featured .subtitle{background:url(../images/js-pontoazul.png) no-repeat;color:#fff;margin:-25px 0 0;padding:10px;position:absolute;left:0;top:10%;width:180px;} #main #featured .subtitle h3{font-size:14px;margin:0 0 7px;text-transform:uppercase;} #main #featured .subtitle p{font-size:12px;line-height:14px;} #main #content{float:left;width:532px;} html <div id="main"> <div id="section"> <div id="featured"> <ul id="controls"> <li id="arrow"></li> <li class="frame1 open">Sacolas</li> <li class="frame2">Isopor&reg;</li> <li class="frame3">PEV-M</li> <!--- <li class="frame4">-</li> ---> </ul> <div id="slider"> <div class="frame" id="frame1"> <div class="subtitle"> <h3>Sacolas Plásticas</h3> <p>O objetivo desse Programa é reduzir em 30% o desperdício dassacolas plásticas distribuídas pelo varejo</p> </div> <a href="http://www.plastivida.org.br/2009/Projetos_SacolasPlasticas.aspx"> <img src="images/js-1.jpg" alt="Sacolinhas plásticas" /> </a> </div> <div class="frame" id="frame2"> <div class="subtitle"> <h3>Isopor&reg;</h3> <p> O Isopor&reg; &eacute; a marca comercial para 2 tipos t&eacute;cnicos de produtos: Poliestireno Expandido e Poliestireno Extrusado</p> </div> <a href="http://www.plastivida.org.br/2009/Isopor_Projeto.aspx"><img src="images/js-2.jpg" alt="Reciclagem de Isopor" /> </a> </div> <div class="frame" id="frame3"> <div class="subtitle"> <h3>PEV-M</h3> <p> Os PEV&rsquo;s-M s&atilde;o cont&ecirc;ineres inspirados em bancas de jornais para estimular a coleta seletiva do lixo. </p> </div> <a href="http://www.plastivida.org.br/2009/Projetos_PEVM.aspx"> <img src="images/js-3.jpg" alt="Coleta seletiva" /> </a> </div> </div> <!--- <div class="frame" id="frame4"> <div class="subtitle"> <h3>-</h3> <p>-</p> </div> <a href="/" target="_blank"> <img src="-" alt="-" /> </a> </div> ---> </div> </div> </div>