Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Efectos al aparecer y desaparecer capas

JQuery - Efectos al aparecer y desaparecer capas

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Efectos al aparecer y desaparecer capas

Publicado por Pablo (4 intervenciones) el 29/03/2016 16:57:32
Buenas,

he estado probando una serie de elementos que al clickear sobre ellos hace que vaya apareciendo un ingrediente de una tarta al pulsar sobre cada uno. El problema que tengo es que no sé cómo hacer para que cuando vuelvo a clickear sobre uno de esos elementos vuelva a quitarle el borde de color activado que se ha puesto al clickear por primera vez (el que agrego de color verde con jquery).
También me gustaría saber cómo se podría hacer para que una vez elegidos, por ejemplo, tres ingredientes automáticamente me redirija a una url, estoy probando pero no logro arreglar estas dos cosas. Mi código es:

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
<div class="item item-chocolate">
            <a href="#" class="show-chocolate">
              <img src="chocolate.png" alt="chocolate" />
              <p>chocolate</p>
            </a>
          </div>
          <div class="item item-cerezas">
            <a href="#" class="show-cerezas">
              <img src="cerezas.png" alt="cerezas" />
              <p>cerezas</p>
            </a>
          </div>
          <div class="item item-caramelos">
            <a href="#" class="show-caramelos">
              <img src="caramelos.png" alt="caramelos" />
              <p>caramelos</p>
            </a>
          </div>
          <div class="item item-merengue">
            <a href="#" class="show-merengue">
              <img src="merengue.png" alt="merengue" />
              <p>merengue</p>
            </a>
          </div>
          <div class="item item-figura">
            <a href="#"figura.png" alt="figura" />
              <p>figura</p>

            </a>

          </div>

          <div class="item item-lazo">
            <a href="#" class="show-lazo">
              <img src="lazo.png" alt="lazo" />
              <p>lazo</p>

            </a>

          </div>

jquery:

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
<script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $('.show-chocolate').on('click',function(){
            $('.bacon').toggle('slow');
            $('.item-chocolate img').css("border", "6px solid green");
         });
         $('.show-cereza').on('click',function(){
            $('.cereza').toggle('slow');
            $('.item-cereza img').css("border", "6px solid green");
         });
        $('.show-caramelos').on('click',function(){
            $('.caramelosi').toggle('slow');
            $('.item-caramelos img').css("border", "6px solid green");
         });
        $('.show-merengue').on('click',function(){
            $('.merengue').toggle('slow');
            $('.item-merengue img').css("border", "6px solid green");
         });
        $('.show-figura').on('click',function(){
            $('.figura').toggle('slow');
            $('.item-figura img').css("border", "6px solid green");
         });
        $('.show-lazos').on('click',function(){
            $('.lazos').toggle('slow');
            $('.item-lazos img').css("border", "6px solid green");
         });
      });
    </script>
 
 
Saludos!!
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

Efectos al aparecer y desaparecer capas

Publicado por arck (21 intervenciones) el 30/03/2016 12:03:58
Buenos días.

Puedes subir un rar o zip con el código funcional? es que como las imágenes están en tu ordenador y no en el nuestro no aparecerá nada.

Gracias. si lo subes le pego una ojeada esta noche.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Efectos al aparecer y desaparecer capas

Publicado por pablo (4 intervenciones) el 30/03/2016 20:29:55
Buenas,

imágenes las he puesto cogidas de google pues más que nada estoy haciendo pruebas de cómo quedaría(ya que lo ví hace tiempo en una web y quería intentar hacerlo) y así, también, aprender un poco más. Habría una img central de una tarta (img-tarta.png) sobre la cual se irían agregando los ingredientes al clickar sobre los elementos que están a izquierda y derecha (en total, por ejemplo, 6. Tres a cada lado). He logrado agregar ingredientes y aplicar efecto de borde sobre el elemento que se activa al clickar, pero no logro hacer que al volver a clickar vuelva a quedar el elemento en el estado que estaba anteriormente (con otro color de borde y demás). Tampoco logro resolver cómo al haber seleccionado, por ejemplo, tres elementos automáticamente se redireccione hacia otra url cualquiera.
El código que tengo es:

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
<div class="container">
      <div class="row">
        <!-- col izquierda -->
        <div class="left col-xs-3 col-md-3">
          <!--chocolate-->
          <div class="item item-chocolate">
            <a href="#" class="show-chocolate">
              <img src="chocolate.png" alt="chocolate" />
              <p>chocolate</p>
            </a>
          </div>
           <!--cerezass-->
          <div class="item item-cerezass">
            <a href="#" class="show-cerezas">
              <img src="cerezass.png" alt="cerezass" />
              <p>cerezas</p>
            </a>
          </div>
           <!--caramelos-->
          <div class="item item-caramelos">
            <a href="#" class="show-caramelos">
              <img src="caramelos.png" alt="caramelos" />
              <p>caramelos</p>
            </a>
          </div>
        </div>
        <!-- col central -->
        <div class="center col-xs-6 col-md-6">
          <img src="logo.png" alt="tarta" class="hidden-xs hidden-sm" />
          <div class="add">
            <img src="base-tarta.png" alt="Base tarta" class="base" />
            <div class="ingredients">
              <div class="chocolate">
                <img src="layout-chocolate.png" alt="chocolate" />
              </div>
               <div class="cerezas">
                <img src="layout-cerezas.png" alt="cerezas" />
              </div>
              <div class="caramelos">
                <img src="layout-caramelos.png" alt="caramelos" />
              </div>
              <div class="merengue">
                <img src="layout-merengue.png" alt="merengue" />
              </div>
              <div class="figura">
                <img src="layout-figura.png" alt="figura" />
              </div>
              <div class="lazo">
                <img src="layout-lazo.png" alt="lazo" />
              </div>
            </div>
          </div>
          <p class="description visible-md visible-lg">selecciona tres ingredientes</p>
        </div>
        <!-- col derecha -->
        <div class="right col-xs-3 col-md-3">
          <!--merengue-->
          <div class="item item-merengue">
            <a href="#" class="show-merengue">
              <img src="merengue.png" alt="merengue" />
              <p>merengue</p>
            </a>
          </div>
           <!--figura-->
          <div class="item item-figura">
            <a href="#" class="show-figura">
              <img src="figuras.png" alt="figuras" />
              <p>figura</p>
            </a>
          </div>
           <!--lazo-->
          <div class="item item-lazo">
            <a href="#" class="show-lazo">
              <img src="lazo.png" alt="lazo" />
              <p>lazo</p>
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $('.show-chocolate').on('click',function(){
            $('.bacon').toggle('slow');
            $('.item-chocolate img').css("border", "6px solid green");
         });
         $('.show-cereza').on('click',function(){
            $('.cereza').toggle('slow');
            $('.item-cereza img').css("border", "6px solid green");
         });
        $('.show-caramelos').on('click',function(){
            $('.caramelosi').toggle('slow');
            $('.item-caramelos img').css("border", "6px solid green");
         });
        $('.show-merengue').on('click',function(){
            $('.merengue').toggle('slow');
            $('.item-merengue img').css("border", "6px solid green");
         });
        $('.show-figura').on('click',function(){
            $('.figura').toggle('slow');
            $('.item-figura img').css("border", "6px solid green");
         });
        $('.show-lazos').on('click',function(){
            $('.lazos').toggle('slow');
            $('.item-lazos img').css("border", "6px solid green");
         });
      });
    </script>
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