efecto fadein fadeout en muchos divs

darkling_ · #1 (**permalink**) 30/01/2013, 14:18

hola, necesito hacer una especie de indice (con muchos divs)con el efecto fadein fadeout para ello emplee jquery pero solo me funciona para un div, y yo quiero agregar mas div que posean este efecto que se active independientemente por medio de un boton. he probado de todo pero no me funciona..
a continuacion les muestro mi codigo que es el que funciona para solo un div:

Código HTML:

<html>
<head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript">
  $(document).ready(function(){
   $("#botonocultamuestra").click(function () {
      $("#divocultamuestra").each(function() {
        displaying = $(this).css("display");
        if(displaying == "block") {
          $(this).fadeOut('slow',function() {
           $(this).css("display","none");
          });
        } else {
          $(this).fadeIn('slow',function() {
            $(this).css("display","block");
          });
        }
      });
    });
  });
  </script>
</head>
<body>

<input type="button" id="botonpruebafade" value="Mostrar div" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div id="divquesemuestra" style="background:#000000;display:none;width:100px;height:100px;"></div>
</body>
</html>

me pueden ayudar?

Rosencrantz · #2 (**permalink**) 30/01/2013, 16:14

Hola si entendí bien creo que tu problema esta en el id, si hay muchos divs debes usar clases ya que los divs se tratan como únicos dentro de una pagina web, algo como esto podrida funcionar.

En lugar de
<div id="divquesemuestra" style="background:#000000;display:none;width:100px ;height:100px;"></div>

Pones
<div class="divquesemuestra" style="background:#000000;display:none;width:100px ;height:100px;"></div>

Y ya podras poner tantos como quieras.

darkling_ · #3 (**permalink**) 31/01/2013, 14:32

no, lo he probado y sigue sin responder :(

Código HTML:

<html>
<head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript">
  $(document).ready(function(){
   $("#botonocultamuestra").click(function () {
      $("#divocultamuestra").each(function() {
        displaying = $(this).css("display");
        if(displaying == "block") {
          $(this).fadeOut('slow',function() {
           $(this).css("display","none");
          });
        } else {
          $(this).fadeIn('slow',function() {
            $(this).css("display","block");
          });
        }
      });
    });
  });
  </script>
</head>
<body>

<input type="button" class="botonpruebafade" id="n" value="Mostrar div" style="font-

size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div class="divquesemuestra" id="k"  style="background:#000000;display:none;width:100px;height:100px;"></div>

</br></br>


<input type="button" class="botonpruebafade" id="s" value="Mostrar div" style="font-

size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div class="divquesemuestra" id="l"  style="background:#000000;display:none;width:100px;height:100px;"></div>



</body>
</html>