JavaScript - Mover el input de izquierda a derecha si hay algún error

 
Vista:
Imágen de perfil de Kevin

Mover el input de izquierda a derecha si hay algún error

Publicado por Kevin (7 intervenciones) el 09/08/2014 05:17:39
Me pueden ayudar a elaborar está transicion de mover los divs a los lados al ingresar algún dato erroneo:
f2c4de7b2777c8cb8a5d0621a65d9829

Muchas gracias.
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: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mover el input de izquierda a derecha si hay algún error

Publicado por xve (2100 intervenciones) el 09/08/2014 08:50:10
Hola Kevin, seria muy similar a la otra transición que te mostré, lo unico que varia el tipo de los estilos, en vez de utilizar transform, utilizamos left

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
    <script>
    var contador=0;
    $(document).ready(function(){
		$("input[type=button]").click(function(){
			if($("input[name=test]").val()=="")
			{
				contador=0;
				moveA();
			}
		});
	});
	function moveA()
	{
		$("input[name=test]").removeClass("moveC").addClass("moveA");
		setTimeout("moveB()",50);
	}
	function moveB()
	{
		$("input[name=test]").removeClass("moveA").addClass("moveB");
		if(contador++<5)
			setTimeout("moveC()",50);
	}
	function moveC()
	{
		$("input[name=test]").removeClass("moveB").addClass("moveC");
		setTimeout("moveA()",50);
	}
    </script>
 
	<style>
	input[type=text] {position:relative;}
	.moveA {
		left:-2px;
	}
	.moveB {
		left:0px;
	}
	.moveC {
		left:2px;
	}
	</style>
</head>
 
<body>
 
<form>
<input type="text" name="test">
<br><input type="button" value="test">
</form>
 
</body>
</html>
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 Kevin

Mover el input de izquierda a derecha si hay algún error

Publicado por Kevin (7 intervenciones) el 09/08/2014 17:07:02
Tu siempre tan atento, gracias.
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