Foros del Web » Programando para Internet » Jquery »

Busco efecto Jquery

Estas en el tema de Busco efecto Jquery en el foro de Jquery en Foros del Web. Buenas! Vi en una web hace un tiempo un efecto que me gustaria implementar en una que estoy programando, a ver si me explico bien... ...
  #1 (permalink)  
Antiguo 13/03/2012, 11:16
 
Fecha de Ingreso: abril-2011
Mensajes: 95
Antigüedad: 13 años, 7 meses
Puntos: 1
Busco efecto Jquery

Buenas!
Vi en una web hace un tiempo un efecto que me gustaria implementar en una que estoy programando, a ver si me explico bien... Tengo esta web :
http://dspaccio.com/bocetos/rafael/3.html

Y lo que pretendo es que el div de la derecha, es decir, donde esta la imagen y la descripcion vaya cambiando en función del menu de la izquierda: "Radiologia, esterilización, etc"

El que ví tenia un efecto como e innerfade, que se desvanecía el div e iba apareciendo el otro, no se si me explico del todo.

Un saludo y gracias
  #2 (permalink)  
Antiguo 13/03/2012, 14:28
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 11 meses
Puntos: 145
Respuesta: Busco efecto Jquery

Hola, aqui te lo dejo en bandeja, lo que hice es crear un menu con los item correspondientes y una serie de contenedores que tienen el contenido que quieres, al pinchar sobre un item oculta todos los contenedores y activa el que corresponde segun el ID.

Saludos.

Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <title>Ejemplo Content</title>
    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
  <style>
  	body	{	width:960px; margin:50px auto;}
  	#left	{	float:left; width:300px;}
  	#right	{	float:right; width:600px;}
  </style>
  
  <script language="JavaScript">
  	$(document).ready(function()
  	{
		$(".display-none").css("display", "none");
		$("#item1").css("display", "inline");
	});
	
	$(function()
	{
		$(".press").click(function()
		{
			$(".display-none").css("display", "none");
			$($(this).attr("rel")).css("display", "inline");
		});
	});
  </script>
</head>

<body>
	
	<div id="left">
		<nav>
			<ul>
				<li><a href="#" class="press" rel="#item1">Item</a></li>
				<li><a href="#" class="press" rel="#item2">Segundo Item</a></li>
				<li><a href="#" class="press" rel="#item3">Tercer Item</a></li>
				<li><a href="#" class="press" rel="#item4">Cuarto Item</a></li>
			</ul>
    	</nav>
	</div>
	
	<div id="right">
		<div class="display-none" id="item1">
			<img src="http://files.myopera.com/EspenAO/albums/684985/img-MyORelease-600x200.jpg" alt="" />
			
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit ut erat accumsan gravida. Sed ornare consectetur libero eu pretium. Nulla at elit nec ante aliquet pellentesque sed in nisl. Quisque enim orci, scelerisque ac interdum eget, blandit ut nunc. Suspendisse fringilla pulvinar lacus, eget malesuada velit ultricies a. Quisque ultrices dui varius leo posuere laoreet. Pellentesque eget ligula ipsum, nec elementum nibh.</p>
		</div>
		
		
		<div class="display-none" id="item2">
			<img src="http://www.oceanrenewable.com/images/community600x200.jpg" alt="" />
			
			<p>Vivamus mollis ligula in nibh feugiat ac suscipit eros rhoncus. Nullam a nulla ut sem hendrerit feugiat id ac lorem. Nulla sit amet nunc vel turpis euismod pulvinar. Quisque eu augue metus, eget aliquam mi. Phasellus eu turpis vel ante suscipit malesuada. Sed lacus dolor, aliquam ac ultrices eget, ultrices in elit. In eget massa at metus mattis blandit. Sed dictum tortor non urna consequat aliquet. </p>
		</div>
		
		<div class="display-none" id="item3">
			<img src="http://www.colts-neck.nj.us/wp-content/uploads/golfing-600x200.jpg" alt="" />
			
			<p>Aenean vel nisl in ipsum sollicitudin imperdiet. Nulla in quam urna. Nullam quis molestie libero. Suspendisse potenti. Duis euismod elementum laoreet. Quisque ac elit et purus laoreet eleifend blandit sit amet sapien. Nulla hendrerit metus sit amet lorem imperdiet at placerat dui posuere. Fusce eleifend pellentesque purus id venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		</div>
		
		<div class="display-none" id="item4">
			<img src="http://collider.com/wp-content/uploads/TRON-LEGACY-Billboard-Olivia-Wilde-Quorra-Poster-600x200.jpg" alt="" />
			
			<p>Duis pellentesque porta lorem, a placerat ante suscipit volutpat. Fusce euismod ipsum sed lorem suscipit varius. Duis in urna nec massa malesuada iaculis eu nec magna. Fusce quis accumsan sapien. Curabitur sit amet risus elit, non ultrices turpis. Proin ornare aliquam enim sed euismod. Ut mattis nulla quis leo molestie faucibus. Proin vitae nisl libero, in convallis felis. Vestibulum nisi neque, vehicula sit amet condimentum eu, vestibulum at nisl. </p>
		</div>
	</div>
  
</body>
</html> 
__________________
http://chicho.ninja yiaaaa
  #3 (permalink)  
Antiguo 14/03/2012, 03:46
 
Fecha de Ingreso: abril-2011
Mensajes: 95
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Busco efecto Jquery

Cita:
Iniciado por chichote Ver Mensaje
Hola, aqui te lo dejo en bandeja, lo que hice es crear un menu con los item correspondientes y una serie de contenedores que tienen el contenido que quieres, al pinchar sobre un item oculta todos los contenedores y activa el que corresponde segun el ID.

Saludos.

Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <title>Ejemplo Content</title>
    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
  <style>
  	body	{	width:960px; margin:50px auto;}
  	#left	{	float:left; width:300px;}
  	#right	{	float:right; width:600px;}
  </style>
  
  <script language="JavaScript">
  	$(document).ready(function()
  	{
		$(".display-none").css("display", "none");
		$("#item1").css("display", "inline");
	});
	
	$(function()
	{
		$(".press").click(function()
		{
			$(".display-none").css("display", "none");
			$($(this).attr("rel")).css("display", "inline");
		});
	});
  </script>
</head>

<body>
	
	<div id="left">
		<nav>
			<ul>
				<li><a href="#" class="press" rel="#item1">Item</a></li>
				<li><a href="#" class="press" rel="#item2">Segundo Item</a></li>
				<li><a href="#" class="press" rel="#item3">Tercer Item</a></li>
				<li><a href="#" class="press" rel="#item4">Cuarto Item</a></li>
			</ul>
    	</nav>
	</div>
	
	<div id="right">
		<div class="display-none" id="item1">
			<img src="http://files.myopera.com/EspenAO/albums/684985/img-MyORelease-600x200.jpg" alt="" />
			
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit ut erat accumsan gravida. Sed ornare consectetur libero eu pretium. Nulla at elit nec ante aliquet pellentesque sed in nisl. Quisque enim orci, scelerisque ac interdum eget, blandit ut nunc. Suspendisse fringilla pulvinar lacus, eget malesuada velit ultricies a. Quisque ultrices dui varius leo posuere laoreet. Pellentesque eget ligula ipsum, nec elementum nibh.</p>
		</div>
		
		
		<div class="display-none" id="item2">
			<img src="http://www.oceanrenewable.com/images/community600x200.jpg" alt="" />
			
			<p>Vivamus mollis ligula in nibh feugiat ac suscipit eros rhoncus. Nullam a nulla ut sem hendrerit feugiat id ac lorem. Nulla sit amet nunc vel turpis euismod pulvinar. Quisque eu augue metus, eget aliquam mi. Phasellus eu turpis vel ante suscipit malesuada. Sed lacus dolor, aliquam ac ultrices eget, ultrices in elit. In eget massa at metus mattis blandit. Sed dictum tortor non urna consequat aliquet. </p>
		</div>
		
		<div class="display-none" id="item3">
			<img src="http://www.colts-neck.nj.us/wp-content/uploads/golfing-600x200.jpg" alt="" />
			
			<p>Aenean vel nisl in ipsum sollicitudin imperdiet. Nulla in quam urna. Nullam quis molestie libero. Suspendisse potenti. Duis euismod elementum laoreet. Quisque ac elit et purus laoreet eleifend blandit sit amet sapien. Nulla hendrerit metus sit amet lorem imperdiet at placerat dui posuere. Fusce eleifend pellentesque purus id venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		</div>
		
		<div class="display-none" id="item4">
			<img src="http://collider.com/wp-content/uploads/TRON-LEGACY-Billboard-Olivia-Wilde-Quorra-Poster-600x200.jpg" alt="" />
			
			<p>Duis pellentesque porta lorem, a placerat ante suscipit volutpat. Fusce euismod ipsum sed lorem suscipit varius. Duis in urna nec massa malesuada iaculis eu nec magna. Fusce quis accumsan sapien. Curabitur sit amet risus elit, non ultrices turpis. Proin ornare aliquam enim sed euismod. Ut mattis nulla quis leo molestie faucibus. Proin vitae nisl libero, in convallis felis. Vestibulum nisi neque, vehicula sit amet condimentum eu, vestibulum at nisl. </p>
		</div>
	</div>
  
</body>
</html> 
Perfecto, es lo que buscaba, solo que donde lo ví que me gustó tenia un efecto como de transparencia, que iba desvaneciendo el div y apareciendo el nuevo, como el innerfade, es compatible con este?

Un saludo!
  #4 (permalink)  
Antiguo 15/03/2012, 06:18
 
Fecha de Ingreso: abril-2011
Mensajes: 95
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Busco efecto Jquery

Nada?

Saludos
  #5 (permalink)  
Antiguo 15/03/2012, 07:27
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 11 meses
Puntos: 145
Respuesta: Busco efecto Jquery

cambia la linea

$($(this).attr("rel")).css("display", "inline");

por

$($(this).attr("rel")).fadeIn("slow");

Aunque existen mas efectos, mira este link

http://api.jquery.com/category/effects/

Saludos.
__________________
http://chicho.ninja yiaaaa
  #6 (permalink)  
Antiguo 16/03/2012, 04:17
 
Fecha de Ingreso: abril-2011
Mensajes: 95
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Busco efecto Jquery

Muchisimas gracias! Todo perfecto

Etiquetas: efecto, html
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




La zona horaria es GMT -6. Ahora son las 22:05.