Como lograr efecto deslizante en capa

isabelramirezmontoya · #1 (**permalink**) 12/04/2013, 22:23

Chicos buenas noches, me colaboran con una idea que tengo.

Como hago para que un mensaje (capa) que esta oculta, tenga un efecto deslizante y se visualice al pasar el raton sobre una esquina de ella.

El efecto se lo quiero aplicar a este codigo:

Código HTML:

Ver original<html>
 
<head>
 
<style type="text/css"> 
 
 .contenedor
 { 
 margin:0 auto;
 padding: 0;
 width: 300px;
 height: 155px;
 border: 1px solid black;
 background: white;
 }
 
 .contenido1
 { 
 margin:0 auto;
 text-align:center;
 padding: 0;
 height: auto;
 background: #CCCCCC;
 }
 
 .contenido2
 { 
 margin:0 auto;
 text-align:center;
 padding: 0;
 height: auto;
 } 
 
 p
 {
 text-align:justify; 
 margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;
 }
 
</style>
 
</head>
 
<body>
 
<div class="contenedor">
 
<div class="contenido1">Importante</div>
 
<div class="contenido2"><p>La idea es que este mensaje (capa) permancezca oculto, que solo sea visible la franja que dice importante, que solo cuando el usuario pase el raton sobre esta franja que dice Importante, la capa que contiene el mensaje, se delice hacia abajo y se visualice</p></div>
 
</div>
 
</body>
</html>

Gracias

alexg88 · #2 (**permalink**) 13/04/2013, 04:37

Buenas,

Te dejo un ejemplo: http://jsfiddle.net/KGp7W/

Está hecho con jquery.

isabelramirezmontoya · #3 (**permalink**) 13/04/2013, 09:36

Cita:

Iniciado por alexg88

Buenas,

Te dejo un ejemplo: http://jsfiddle.net/KGp7W/

Está hecho con jquery.

alexg88, gracias por tu tiempo.

El ejemplo esta perfecto, tengo un par de dudas.

1. La version de esa libreria exactamente de donde la bajo?. Es una version especifica?, lo pregunto por que veo que hay varias versiones.

2. Una vez la baje la direcciono como todas las librerias <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

3. En la solucion que me diste, se puede hacer una variante que permita tener abierta la capa del mensaje mientras se tenga el raton sobre el mensaje, no solo sobre el titulo.

Gracias por tu tiempo

alex1084 · #4 (**permalink**) 13/04/2013, 11:18

Mira puedes ocupar esto

http://jqueryui.com/demos/

Tiene muchas funcionalidades y considero es muy completa, puedes descargar toda la libreria con ejemplos y todo

alexg88 · #5 (**permalink**) 13/04/2013, 11:38

Buenas de nuevo,

La librería JQueryUI está muy bien, pero sólo con JQuery se puede hacer lo que pide Isabel, así que me parece que no es necesario para este caso.

Te pongo el mismo ejemplo con lo que pides:

http://jsfiddle.net/KGp7W/3/

Para que no se cierre mientras está sobre todo el contenido, he cambiado lo que se selecciona (en vez de elegir sólo el título, he seleccionado el elemento con clase = "contenedor").

Sobre la versión, te recomiendo que uses la última (1.9.1).

Te dejo el enlace oficial: http://jquery.com/download/

Como explica en la página, puedes usar versiones que están alojadas en servidores externos como los propios de JQuery, de Google o de Microsoft si lo deseas.

Un saludo.

alex1084 · #6 (**permalink**) 13/04/2013, 11:40

La idea de darle el link de jquery ui es para que ella conozca algo mas de jquery ya que por las preguntas que hizo parece que no conoce mucho, y asi evitar que luego pregunte por un calendario, por como arrastrar objetos y cosas asi..

isabelramirezmontoya · #7 (**permalink**) 13/04/2013, 21:14

alexg88, que pena molestarte nuevamente, pero no logro que me funcione, hice los cambios que me sugeriste y baje la libreria jquery, pero no logro que me funcione.

Adjunto el codigo con los cambios. ¿Tengo algo malo en el script?

Código HTML:

Ver original<html>
 
<head>
 
<script src="jquery-1.9.1.min.js"></script>
 
<script type="text/javascript">
 
$(".contenedor").hover(
function()
{
 $(".contenido2").finish().slideDown();      
},
function()
{
 $(".contenido2").slideUp();   
    
});
    
</script>
 
<style type="text/css"> 
 
 .contenedor
 { 
 margin:0 auto;
 padding: 0;
 width: 300px;
 border: 1px solid black;
 background: white;
 }
 
 .contenido1
 { 
 margin:0 auto;
 text-align:center;
 padding: 0;
 height: auto;
 background: #CCCCCC;
 }
 
 .contenido2
 { 
 margin:0 auto;
 text-align:center;
 padding: 0;
 display:none;
 height: auto;
 } 
 
 p
 {
 text-align:justify; 
 margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;
 }
 
</style>
 
</head>
 
<body>
 
<div class="contenedor">
 
<div class="contenido1">Importante</div>
 
<div class="contenido2"><p>La idea es que este mensaje (capa) permancezca oculto, que solo sea visible la franja que dice importante, que solo cuando el usuario pase el raton sobre esta franja que dice Importante, la capa que contiene el mensaje, se delice hacia abajo y se visualice</p></div>
 
</div>
 
</body>
</html>

Gracias

alexg88 · #8 (**permalink**) 14/04/2013, 07:54

Buenas,

Para que funcione correctamente, hay que ejecutar el script cuando se haya cargado el DOM y para eso se usa el método ready al que se la pasa la función que se ejecuta al cargarse el DOM.

Código HTML:

Ver original<html>
 
<head>
 
<script src="jquery-1.9.1.min.js"></script>
 
<script type="text/javascript">
 $(document).ready(function(){
$(".contenedor").hover(
function()
{
 $(".contenido2").finish().slideDown();      
},
function()
{
 $(".contenido2").slideUp();   
    
});
});
    
</script>
 
<style type="text/css"> 
 
 .contenedor
 { 
 margin:0 auto;
 padding: 0;
 width: 300px;
 border: 1px solid black;
 background: white;
 }
 
 .contenido1
 { 
 margin:0 auto;
 text-align:center;
 padding: 0;
 height: auto;
 background: #CCCCCC;
 }
 
 .contenido2
 { 
 margin:0 auto;
 text-align:center;
 padding: 0;
 display:none;
 height: auto;
 } 
 
 p
 {
 text-align:justify; 
 margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;
 }
 
</style>
 
</head>
 
<body>
 
<div class="contenedor">
 
<div class="contenido1">Importante</div>
 
<div class="contenido2"><p>La idea es que este mensaje (capa) permancezca oculto, que solo sea visible la franja que dice importante, que solo cuando el usuario pase el raton sobre esta franja que dice Importante, la capa que contiene el mensaje, se delice hacia abajo y se visualice</p></div>
 
</div>
 
</body>
</html>

isabelramirezmontoya · #9 (**permalink**) 14/04/2013, 13:11

Alexg88, quedo perfecto gracias por tu tiempo y paciencia.

De programacion muy poquito estoy aprendiendo hasta ahora. Ese tipo de funcion que empleaste para el ejercicio todavia me da dificulta entenderlas, apenas entienda las funciones basicas "normales". En los manuales uno aprende sobre las funciones "normales" como funcionan, pero ningun manual hasta ahora que yo conozca explica como funcionan las funciones como la que
colocaste en este ejercicio.

Mil gracias