Código de JQuery - Cambiar la capa de nuestra web utilizando fadeIn y fadeOut en HTML5

Versión 1

Publicado el 25 de Julio del 2013gráfica de visualizaciones de la versión: Versión 1
14.240 visualizaciones desde el 25 de Julio del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puede ver el ejemplo de dicho código en: jquery_fadeIn_fadeOut.php
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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <title>Ejemplo de cambio de contenido con fadeIn y fadeOut</title>
 
    <script>
        // inicialmente aparece la primera opcion marcada
        var ultimo=1;
        $(document).ready(function(){
            // evento que se ejecutara al seleccionar cualquier opcion del menu
            $("#opciones li").click(function(){
                // obtenemos el nuevo id
                nuevo=$(this).attr("id");
                if(nuevo!=ultimo)
                {
                    // escondemos el ultimo id
                    $("#contenido"+ultimo).fadeOut(function(){
                        $("#"+ultimo).removeClass("seleccionado");
                        $("#"+nuevo).addClass("seleccionado");
                        // mostramos el nuevo id
                        $("#contenido"+nuevo).fadeIn();
                        ultimo=nuevo;
                    });
                }
            });
        });
    </script>
 
    <style>
        nav, article    {overflow:hidden;}
        article         {margin-top:20px;}
        footer          {margin-top:50px;}
        .contenido      {display:none;}
 
        /* hace referencia a las opciones del menu */
        ul              {list-style-type:none;padding:0px;margin:0px;}
        ul li           {float:left;padding:5px;cursor:pointer;
                        border:1px solid #ccc;margin:2px;}
        ul li:hover     {background-color:#f6ff97;}
 
        /* determina la opcion de menu seleccionada */
        .seleccionado   {background-color:#cccccc;}
    </style>
</head>
 
<body>
    <nav>
        <ul id="opciones">
            <li id="1" class='seleccionado'>Ver contenido1</li>
            <li id="2">Ver contenido2</li>
            <li id="3">Ver contenido3</li>
            <li id="4">Ver contenido4</li>
        </ul>
    </nav>
 
    <article>
        <div id="contenido1">
            Contenido 1
        </div>
        <div id="contenido2" class="contenido">
            Contenido 2
        </div>
        <div id="contenido3" class="contenido">
            Contenido 3
        </div>
        <div id="contenido4" class="contenido">
            Contenido 4
        </div>
    </article>
 
    <footer>
        <a href="http://www.lawebdelprogramador.com">La Web del programador</a>
    </footer>
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2436