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

Imágen de perfil

Cambiar la capa de nuestra web utilizando fadeIn y fadeOut en HTML5gráfica de visualizaciones


JQuery

Publicado el 25 de Julio del 2013 por Xavi
12.103 visualizaciones desde el 25 de Julio del 2013. Una media de 70 por semana
Código que muestra como utilizar simultáneamente el fadeIn y fadeOut para cambiar la capa visual.

Versión 1

Publicado el 25 de Julio del 2013gráfica de visualizaciones de la versión: Versión 1
12.104 visualizaciones desde el 25 de Julio del 2013. Una media de 70 por semana
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

http://lwp-l.com/s2436