¿Como hacer delay?

PanchoJ · #1 (**permalink**) 06/11/2010, 16:27

Hola
Alguien me podria decir como realizar la aparicion de un div oculto con un retardo de 1 o 2 segundos.

El codigo

Código HTML:

<div
onmouseover="document.getElementById('X').style.display='inline';"
onmouseout="document.getElementById('X').style.display='none';"
>Contenido</div>
<div id="X" name="X" style="display:none;"> Contenido oculto </div>

Como hago para mostrar el contenido que esta oculto al pasar el mouse por div anterior y que demore un tiempo en aparecer, teniendo el id que no se conocen precisamente el valor varia por cada elemento div oculto.

Segui el siguiente ejemplo que modifique pero no funciona

Código HTML:

<html>
  <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script>
      <script type="text/javascript">
         var clas = "";

         function hacerCosasDeVerdad(param1) {
               clas = "."+param1;
                $.ajax({
                data: clas ,
                success:
                    $(function() {
                         $(clas).hover( function(){
                         $(this).css('display', 'inline');
                         $(this).css('background-color', '#F00');
                    },
                    function(){
                         $(this).css('display', 'none');
                         $(this).css('background-color', '#FFF');
                   })
              })
              })
    

           }

     </script>

  </head>
  <body>
      <div id="menu">
          <div class="menuItem" onmouseover="hacerCosasDeVerdad('menuItem1');"
               onmouseout="hacerCosasDeVerdad('menuItem1');"><a href=#>Bla</a></div>
          <div class="menuItem" onmouseover="hacerCosasDeVerdad('menuItem2');"
               onmouseout="hacerCosasDeVerdad('menuItem2');"><a href=#>Bla</a></div>
      </div>
      
      <div id="menu">
          <div class="menuItem1" id="menuItem1" style="display: none;background-color: red;"><a href=#>Bla ocultp</a></div>
          <div class="menuItem2" id="menuItem2" style="display: none;background-color: blue;"><a href=#>Bla socultp</a></div>
     </div>

  </body>
</html>

caricatos · #2 (**permalink**) 06/11/2010, 17:14

Hola:

Sin librerías es más fácil... busca información sobre setInterval y setTimeout... la segunda opción parece más idónea.

Saludos

PanchoJ · #3 (**permalink**) 08/11/2010, 17:46

Funciono bien setTimeout(), agrego un ejemplo muy sencillo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Delay</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<script type="text/javascript">
//<![CDATA[
var speed=2000;
var id = "";
var accion = "";
function show(i,ac){
    id = i;
    accion = ac;
    setTimeout('fadeIn()',speed);
}

function fadeIn() {
    document.getElementById(id).style.display=accion;
}
//]]>
</script>
</head>
<body>

<div id="visible" onmouseover="show('oculto','inline');" onmouseout="show('oculto','none');">
    visible
</div>
<div id="oculto" style="display: none;">oculto</div>
</body>
</html>

Gracias caricatos