JQuery - Animacion

   
Vista:

Animacion

Publicado por eugenio (2 intervenciones) el 08/12/2013 03:50:58
Bueno, antes que nada, soy completamente un noob en el tema, dicho esto les dejo el codigo, el problema es que mi animacion no funciona

1
2
3
4
5
$(document).ready(function(){
	$('#nav').mouseenter(function(){
		$('.menuprincipal').animate({color:"#fff"}, 1000);
	});
});

el HTML

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
<!doctype html>
<html>
	<head>
		<title>Ink Web, Diseño, Maqueteado, Porgramacion, Inspiracion, Desarrollo Web.</title>
		<meta charset= "utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script type="text/javascript" rel ="javascript" src="script.js"></script>
	</head>
	<body>
	<div id="contenedor">
		<div id="header">
			<div id="nav">
				<a href="#"><span class="menuprincipal" >Home</span></a>
				<a href="#"><span class="menuprincipal" >Nosotros</span></a>
				<a href="#"><span class="menuprincipal">Contacto</span></a>
			</div>
		</div><!--   Cierre id="header"   -->
			<div id="midcont">
 
				<p id="cp">Creativos Profesionales</p>
 
				<h1 id="titulo">Ink Web</h1>
 
				<p id="slogan">Tu empresa, nuestra empresa</p>
 
				<p id="crecer">Nosotros crecemos si Ud. crece, contamos con los mejores profesionales en materias de Diseño, con el objetivo de hacer que su web soñada, realidad, para que tu PyME ó Empresa cresca!</p>
			</div>
	</div><!--   Cierre id="contenedor"   -->
 
 
 
 
	</body>
</html>

Bueno quiero lograr que cuando el usuario posicione el mouse sobre uno de los hipervinculos de arriba, el mismo, cambie a color negro.


les dejo el css por si sirve de algo

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
* {margin: 0; padding: 0;}
 
body {background-color: #4A0025; min-width: 100%; min-height: 100%; font-family: arial;}
 
div {display: block; margin: 0; padding: 0;}
 
a:link, a:visited, a:hover {text-decoration: none !important;}
 
 
#header{
 
	height: 2em;
	width: 100%;
	margin-bottom: 1em;
 
 
}
 
#nav{
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
 
.menuprincipal{
 
	font-size: 1.5em;
	display: inline-block;
	margin-left: 1em;
	text-decoration: none;
	color:#E6CCFF;
 
}
 
#titulo {
 
	font-size: 10em;
	color: #0F0F0A;
	text-align: center;
	display: block;
	height: 100%;
	text-shadow:
	1px 1px 5px #4D2B3D, 
	2px 2px 5px #4D2B3D, 
	3px 3px 5px #391427, 
	4px 4px 5px #391427, 
	5px 5px 5px #36001B, 
	6px 6px 5px #36001B, 
	7px 7px 5px #260013,
	-1px -1px 0 #4D2B3D;
 
 
}
 
#contenedor {
 
	width: 800px;
	margin: auto;
	margin-top: 8em;
	margin-bottom: 8em;
 
}
 
#slogan{
 
	font-size: 1.3em;
	float: right;
	display: block;
	margin-top: -1.3em;
	color: #B6859D;
	text-shadow:
 
	3px 3px 5px #391427, 
	4px 4px 5px #391427, 
	5px 5px 5px #36001B, 
	6px 6px 5px #36001B, 
	7px 7px 5px #260013;
}
 
#crecer{
 
	font-size: 1.1em;
	color: #eeeeee;
	text-shadow:
	1px 1px 5px #4D2B3D, 
	2px 2px 5px #4D2B3D, 
	3px 3px 5px #391427, 
	4px 4px 5px #391427, 
	5px 5px 5px #36001B, 
	6px 6px 5px #36001B, 
	7px 7px 5px #260013,
	-1px -1px 0 #4D2B3D;
}
 
#midcont{
 
	max-width: 39em;
	margin:auto;
}
 
#cp{
 
	color: #eeeeee;
	font-size: 2.4em;
	margin-bottom: -1em;
	display: block;
	text-shadow: 1px 1px 3px black;
	margin-left: .3em;
}

Se agradecen criticas y comentarios en cuatro a los 3 codigos :D hace un mes aproximadamente empeze con html aun me falta mucho que aprender.

(DIsculpen por el css completamente desordenado.)
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

Animacion

Publicado por xve (557 intervenciones) el 08/12/2013 19:07:44
Hola Eugenio, he probado tu código, y he tenido que cambiar tu código javascript por este... haber que te parece:
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    $('.menuprincipal').hover(
        function(){
            // Se ejecuta al pasar el raton por encima
            $(this).animate({color:"#fff"}, 300);
        }, function(){
            // Se ejecuta al quitar el raton de encima
            $(this).animate({color:"#E6CCFF"}, 300);
        }
    );
});

Coméntanos si te sirve, 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

Animacion

Publicado por eugenio (2 intervenciones) el 09/12/2013 00:03:56
Gracias por la ayuda, sin embargo no me funciono el script, de todos modos, tu script y el mio ambos estan bien escritos para la tarea a realizar no se porque entonces ninguno me funciona, porque tengo los tags de los scripts de jquery y jquery UI en el head
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

Animacion

Publicado por xve (557 intervenciones) el 09/12/2013 07:34:45
Hola Eugenio, a mi tu código no me ha funcionado... por esto te puse el cambio que tenias que hacer.

Con el cambio que te he indicado, me ha funcionado correctamente... te adjunto el código con el que he realizado la prueba... si lo guardas en un archivo .html te tiene que funcionar. Para la prueba he puesto un color azul para se note un poco mas...

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html>
    <head>
        <title>Ink Web, Diseño, Maqueteado, Porgramacion, Inspiracion, Desarrollo Web.</title>
        <meta charset= "utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
            * {margin: 0; padding: 0;}
 
            body {background-color: #4A0025; min-width: 100%; min-height: 100%; font-family: arial;}
 
            div {display: block; margin: 0; padding: 0;}
 
            a:link, a:visited, a:hover {text-decoration: none !important;}
 
            #header{
                height: 2em;
                width: 100%;
                margin-bottom: 1em;
 
 
            }
 
            #nav{
                display: block;
                text-align: center;
                margin-right: auto;
                margin-left: auto;
            }
 
            .menuprincipal{
                font-size: 1.5em;
                display: inline-block;
                margin-left: 1em;
                text-decoration: none;
                color:#E6CCFF;
 
            }
 
            #titulo {
                font-size: 10em;
                color: #0F0F0A;
                text-align: center;
                display: block;
                height: 100%;
                text-shadow:
                1px 1px 5px #4D2B3D, 
                2px 2px 5px #4D2B3D, 
                3px 3px 5px #391427, 
                4px 4px 5px #391427, 
                5px 5px 5px #36001B, 
                6px 6px 5px #36001B, 
                7px 7px 5px #260013,
                -1px -1px 0 #4D2B3D;
            }
 
            #contenedor {
                width: 800px;
                margin: auto;
                margin-top: 8em;
                margin-bottom: 8em;
            }
 
            #slogan{
                font-size: 1.3em;
                float: right;
                display: block;
                margin-top: -1.3em;
                color: #B6859D;
                text-shadow:
 
                3px 3px 5px #391427, 
                4px 4px 5px #391427, 
                5px 5px 5px #36001B, 
                6px 6px 5px #36001B, 
                7px 7px 5px #260013;
            }
 
            #crecer{
                font-size: 1.1em;
                color: #eeeeee;
                text-shadow:
                1px 1px 5px #4D2B3D, 
                2px 2px 5px #4D2B3D, 
                3px 3px 5px #391427, 
                4px 4px 5px #391427, 
                5px 5px 5px #36001B, 
                6px 6px 5px #36001B, 
                7px 7px 5px #260013,
                -1px -1px 0 #4D2B3D;
            }
 
            #midcont{
                max-width: 39em;
                margin:auto;
            }
 
            #cp{
                color: #eeeeee;
                font-size: 2.4em;
                margin-bottom: -1em;
                display: block;
                text-shadow: 1px 1px 3px black;
                margin-left: .3em;
            }
        </style>
        <script>
            $(document).ready(function(){
                $('.menuprincipal').hover(
                    function(){
                        // Se ejecuta al pasar el raton por encima
                        $(this).animate({color:"#00f"}, 300);
                    }, function(){
                        // Se ejecuta al quitar el raton de encima
                        $(this).animate({color:"#E6CCFF"}, 300);
                    }
                );
            });
        </script>
    </head>
    <body>
        <div id="contenedor">
            <div id="header">
                <div id="nav">
                    <a href="#"><span class="menuprincipal" >Home</span></a>
                    <a href="#"><span class="menuprincipal" >Nosotros</span></a>
                    <a href="#"><span class="menuprincipal">Contacto</span></a>
                </div>
            </div><!--   Cierre id="header"   -->
            <div id="midcont">
 
                <p id="cp">Creativos Profesionales</p>
 
                <h1 id="titulo">Ink Web</h1>
 
                <p id="slogan">Tu empresa, nuestra empresa</p>
 
                <p id="crecer">Nosotros crecemos si Ud. crece, contamos con los mejores profesionales en materias de Diseño, con el objetivo de hacer que su web soñada, realidad, para que tu PyME ó Empresa cresca!</p>
            </div>
        </div><!--   Cierre id="contenedor"   -->
    </body>
</html>

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