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  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! |