Foros del Web » Programando para Internet » Jquery »

Mejorar lentitud en scrip jQuery

 Estas en el tema de Mejorar lentitud en scrip jQuery en el foro de Jquery en Foros del Web. Hola como estan? Este es mi primer post en este gran foro. Es un filtro de contenido, que segun que input toques, el contenido no ...
  #1 (permalink)  
Antiguo 25/12/2010, 14:14
 
Fecha de Ingreso: junio-2010
Mensajes: 153
Antigüedad: 15 años, 5 meses
Puntos: 4
Mejorar lentitud en scrip jQuery
Hola como estan?
Este es mi primer post en este gran foro.

Es un filtro de contenido, que segun que input toques, el contenido no deciado va desapareciendo y a la ves, aparece una cruz en el input seleccionado.
El problema es que cuando vas clickiando distintos input, las cruces tardan en aparecer o la cruz se queda en el input anterior, y aveces tambien el contenido tarda en aparecer.

Les dejo el script y el codigo html.

HTML:
Código: 
<form id="filtro">
<fieldset>
<label>Filtrar por Zona: </label>
<label class="input2"><input type="button" value="Todas" id="todas" />
<span id="t">&times;</span>
</label>
<label class="input2"><input type="button" value="Cap.Fe" id="cap" />
<span id="c">&times;</span>
</label>
<label class="input2"><input type="button" value="Z.Norte" id="zn" />
<span id="n">&times;</span>
</label>
<label class="input2"><input type="button" value="Z.Oeste" id="zo" />
<span id="o">&times;</span>
</label>
<label class="input2"><input type="button" value="Z.Sur" id="zs" />
<span id="s">&times;</span>
</label>
</fieldset>
<fieldset>
<label>Filtrar por Lugar: </label>
<label class="input2"><input type="button" value="Todos" id="todos" />
<span id="to">&times;</span>
</label>
<label class="input2"><input type="button" value="Boliches" id="boliche" />
<span id="b">&times;</span>
</label>
<label class="input2"><input type="button" value="Bares" id="bar" />
<span id="ba">&times;</span>
</label>  
<label class="input2"><input type="button" value="After" id="after" />
<span id="a">&times;</span>
</label>
</fieldset>
</form>
<div id="lugares">           
<div class="capfe">
 <div class="boliches">					
<strong>Boliche 1</strong>
<span>Cap.Fe</span>
</div>
</div>
<div class="capfe">
<div class="bares">
<strong>Bar 1</strong>
<span>Cap.Fe</span>
</div>
</div>
<div class="capfe">
<div class="afters">
<strong>After 1</strong>
<span>Cap.Fe</span>
</div>
</div>
            
<div class="znorte">
<div class="boliches">						
<strong>Boliche 2</strong> 
<span>Z.Norte</span>
</div>
</div>
<div class="znorte">
<div class="bares">
<strong>Bar 2</strong> 
<span>Z.Norte</span>                  
</div>
</div>
<div class="znorte">
<div class="afters">
<strong>After 2</strong> 
<span>Z.Norte</span>
</div>
</div>
<div class="zoeste">
<div class="boliches">	
<strong>Boliche 3</strong> 
<span>Z.Oeste</span>
</div>
</div>
<div class="zoeste">
<div class="bares">
<strong>Bar 3</strong> 
<span>Z.Oeste</span>
</div>
</div>
<div class="zoeste">	
<div class="afters">
<strong>After 3</strong> 
<span>Z.Oeste</span>
</div>
</div>
<div class="zsur">
<div class="boliches">	
<strong>Boliche 4</strong> 
<span>Z.Sur</span>
</div>
</div>
<div class="zsur">
<div class="bares">
<strong>Bar 4</strong> 
<span>Z.Sur</span>
</div>
</div>
<div class="zsur">
<div class="afters">
<strong>After 4</strong> 
<span>Z.Sur</span>
</div>
</div>
</div><!-- FIN DE LUGARES -->
</div>
JQUERY:

Código: 
$(document).ready(IniciarAccion);

	function IniciarAccion()
	{
		// ------ C R U C E S ------- //    
		$("#t").fadeTo("fast","1");  
		$("#c").fadeTo("fast","0");  
		$("#n").fadeTo("fast","0");  
		$("#o").fadeTo("fast","0");
		$("#s").fadeTo("fast","0");
		$("#to").fadeTo("fast","1"); 
		$("#b").fadeTo("fast","0");  
		$("#ba").fadeTo("fast","0");
		$("#a").fadeTo("fast","0");
		// ---------------------------- //
		$(".capfe").show("fast");
		$(".znorte").show("fast");
		$(".zoeste").show("fast");
		$(".zsur").show("fast");
		// ------ Z O N A S ------- //    
		$("#todas").click(mostrarTodas);  
		$("#cap").click(mostrarCapFe);  
		$("#zn").click(mostrarNorte);  
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos); 
		$("#boliche").click(mostrarBoliches);  
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);		
	}
	
	function mostrarTodas()
	{
		$("#t").fadeTo("normal","1");
		$("#c").fadeTo("fast","0");  
		$("#n").fadeTo("fast","0");  
		$("#o").fadeTo("fast","0");
		$("#s").fadeTo("fast","0");
		$(".capfe").show("fast");
		$(".znorte").show("fast");
		$(".zoeste").show("fast");
		$(".zsur").show("fast");
		// ------ Z O N A S ------- //    
		$("#todas").click(mostrarTodas);  
		$("#cap").click(mostrarCapFe);  
		$("#zn").click(mostrarNorte);  
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos); 
		$("#boliche").click(mostrarBoliches);  
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);		
	}
	
	function mostrarTodos()
	{
		$("#to").fadeTo("fast","1");
		$("#b").fadeTo("fast","0");  
		$("#ba").fadeTo("fast","0");
		$("#a").fadeTo("fast","0");
		$(".boliches").show("fast");
		$(".bares").show("fast");
		$(".afters").show("fast");
		// ------ Z O N A S ------- //  
		$("#todas").click(mostrarTodas); 
		$("#cap").click(mostrarCapFe);  
		$("#zn").click(mostrarNorte);  
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos); 
		$("#boliche").click(mostrarBoliches);  
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);		
	}
	
	function mostrarCapFe()
	{
		$("#t").fadeTo("fast","0");
		$("#c").fadeTo("fast","1");  
		$("#n").fadeTo("fast","0");  
		$("#o").fadeTo("fast","0");
		$("#s").fadeTo("fast","0");
		$(".capfe").show("normal");
		$(".znorte").hide("fast");
		$(".zoeste").hide("fast");
		$(".zsur").hide("fast");
		// ------ Z O N A S ------- //
		$("#todas").click(mostrarTodas);
		$("#zn").click(mostrarNorte);
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos);
		$("#boliche").click(mostrarBoliches);  
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);		
	}

	function mostrarNorte()
	{
		$("#t").fadeTo("fast","0");
		$("#c").fadeTo("fast","0");  
		$("#n").fadeTo("fast","1");  
		$("#o").fadeTo("fast","0");
		$("#s").fadeTo("fast","0");
		$(".znorte").show("normal");
		$(".capfe").hide("fast");
		$(".zoeste").hide("fast");
		$(".zsur").hide("fast");
		// ------ Z O N A S ------- //
		$("#todas").click(mostrarTodas);
		$("#cap").click(mostrarCapFe);
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos);
		$("#boliche").click(mostrarBoliches);  
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);
	}

	function mostrarOeste()
	{
		$("#t").fadeTo("fast","0");
		$("#c").fadeTo("fast","0");  
		$("#n").fadeTo("fast","0");  
		$("#o").fadeTo("fast","1");
		$("#s").fadeTo("fast","0");
		$(".zoeste").show("normal");
		$(".capfe").hide("fast");
		$(".znorte").hide("fast");
		$(".zsur").hide("fast");
		// ------ Z O N A S ------- //
		$("#todas").click(mostrarTodas);
		$("#zn").click(mostrarNorte);
		$("#cap").click(mostrarCapFe);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos);
		$("#boliche").click(mostrarBoliches);  
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);		
	}

	function mostrarSur()
	{
		$("#t").fadeTo("fast","0");
		$("#c").fadeTo("fast","0");  
		$("#n").fadeTo("fast","0");  
		$("#o").fadeTo("fast","0");
		$("#s").fadeTo("fast","1");
		$(".zsur").show("normal");
		$(".capfe").hide("fast");
		$(".znorte").hide("fast");
		$(".zoeste").hide("fast");
		// ------ Z O N A S ------- //
		$("#todas").click(mostrarTodas);
		$("#zn").click(mostrarNorte);
		$("#zo").click(mostrarOeste);
		$("#cap").click(mostrarCapFe);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos);
		$("#boliche").click(mostrarBoliches);  
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);		
	}
	
	function mostrarBoliches()
	{
		$("#to").fadeTo("fast","0");
		$("#b").fadeTo("fast","1");  
		$("#ba").fadeTo("fast","0");
		$("#a").fadeTo("fast","0");
		$(".boliches").show("normal");
		$(".bares").hide("fast");
		$(".afters").hide("fast");
		// ------ Z O N A S ------- //
		$("#todas").click(mostrarTodas);
		$("#cap").click(mostrarCapFe);  
		$("#zn").click(mostrarNorte);  
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos);
		$("#bar").click(mostrarBares);
		$("#after").click(mostrarAfters);		
	}
	
	function mostrarBares()
	{
		$("#to").fadeTo("fast","0");
		$("#b").fadeTo("fast","0");  
		$("#ba").fadeTo("fast","1");
		$("#a").fadeTo("fast","0");
		$(".bares").show("normal");
		$(".boliches").hide("fast");
		$(".afters").hide("fast");
		// ------ Z O N A S ------- //
		$("#todas").click(mostrarTodas);
		$("#cap").click(mostrarCapFe);  
		$("#zn").click(mostrarNorte);  
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos);
		$("#boliche").click(mostrarBoliches);
		$("#after").click(mostrarAfters);		
	}
	
	function mostrarAfters()
	{
		$("#to").fadeTo("fast","0");
		$("#b").fadeTo("fast","0");  
		$("#ba").fadeTo("fast","0");
		$("#a").fadeTo("fast","1");
		$(".afters").show("normal");
		$(".bares").hide("fast");
		$(".boliches").hide("fast");
		// ------ Z O N A S ------- //
		$("#todas").click(mostrarTodas);
		$("#cap").click(mostrarCapFe);  
		$("#zn").click(mostrarNorte);  
		$("#zo").click(mostrarOeste);
		$("#zs").click(mostrarSur);
		// ----	L U G A R E S ----- // 
		$("#todos").click(mostrarTodos);
		$("#bar").click(mostrarBares);
		$("#boliche").click(mostrarBoliches);		
	}
Espero que me puedan ayudar. Muchas Gracias
  #2 (permalink)  
Antiguo 27/12/2010, 05:41
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años, 11 meses
Puntos: 65
Respuesta: Mejorar lentitud en scrip jQuery
en cada click estas asignando otro click
tenes que asignar 1 sola vez al iniciar

podes seleccionar varios elementos para trabajar en ellos, por ej:

en vez de
$("#a").fadeTo();
$("#b").fadeTo();
$("#c").fadeTo();
$("#d").fadeTo();

haces
$("#a, #b, #c, #d").fadeTo();
  #3 (permalink)  
Antiguo 27/12/2010, 07:16
 
Fecha de Ingreso: junio-2010
Mensajes: 153
Antigüedad: 15 años, 5 meses
Puntos: 4
Respuesta: Mejorar lentitud en scrip jQuery
aaah barbaro!! graacias!!

Etiquetas: lentitud, mejoras
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:00.