Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » AYUDA EJERCICIO

JQuery - AYUDA EJERCICIO

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Miguel Angel
Val: 4
Ha aumentado su posición en 6 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

AYUDA EJERCICIO

Publicado por Miguel Angel (3 intervenciones) el 07/01/2017 14:56:59
Hola, tengo el siguiente ejercicio:
Al situar el ratón sobre la imagen, el div #infoImg ocupe el 100% de la altura de la imagen con una transición de 1 segundo. Al quitar el ratón de encima, el div #infoImg ocupe de nuevo el 30% de la imagen con una transición de 1 segundo.
Y lo que he hecho es lo siguiente:
1
2
3
4
5
6
7
8
9
10
function ocupaCien(){
    $(this).stop();
    $("#contentImg").live("mouseenter", 1000, function(){
        var pos = $(this).attr("abs");
        $("#infoImg").css("height",pos);
    });
    $("#infoImg").live("mouseout",1000, function(){
        $("#infoImg").css("height","30%");
    });
}
Como veis, primero accedo a la imagen y obtengo sus atributos al pasar el raton por encima, y cambio el tamaño del div infoImg a la altura de el valor obtenido(pos), y despues al sacar el raton de encima de la imagen, lo devuelvo a su tamaño original que era el 30%, no se porque, pero no me funciona.
A ver si me podéis ayudar y por cierto, que lo primero es la educación, se me olvidaba desearos a todos un muy Feliz Año nuevo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

AYUDA EJERCICIO

Publicado por xve (673 intervenciones) el 08/01/2017 10:51:58
Hola Miguel, esto es mucho mas sencillo haciéndolo con CSS... aquí te muestro un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
	<style>
	img {
		width:30%;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}
 
	img:hover {
		width:100%;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;Reemplace este texto
	}
	</style>
</head>
 
<body>
 
<img src="code39.png">
 
</body>
</html>

Te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Miguel Angel
Val: 4
Ha aumentado su posición en 6 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

AYUDA EJERCICIO

Publicado por Miguel Angel (3 intervenciones) el 08/01/2017 12:20:22
Se que es mas sencillo con CSS, pero lo tenemos que hacer con jquery, gracias de todas formas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

AYUDA EJERCICIO

Publicado por xve (673 intervenciones) el 08/01/2017 20:40:45
Hola Miguel, haber si te sirve así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
	#image {width:30%}

	</style>
</head>
 
<body>
 
<img src="code39.png" id="image">
 
</body>
</html>
 
<script>
var state=0;
$("#image").click(function() {
	if(state==0)
	{
		state=1;
		$(this).animate({
			width:"100%",
		},1000);
	}else{
		state=0;
		$(this).animate({
			width:"30%",
		},1000);
	}
});
</script>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar