Mostrar elemento un tiempo y luego no mostrarlo

tempto · #1 (**permalink**) 09/03/2010, 13:00

Hola,

Tengo una función para mostrar un tooltip, lo que quiero es que se muestre sólo 5" y desaparezca, y no vuelva a aparecer hasta que el cursor pase de nuevo por el enlace.

Estoy utilizando la función fadeOut, pero a pesar de que le doy un valor muy alto, hace el efecto como un parpadeo, no da tiempo a leer el tooltip.

¿Sabéis aguna función para solucionarlo? Gracias

buzu · #2 (**permalink**) 09/03/2010, 21:40

para empezar, que función fadeOut? de donde la sacaste? Como haces la llamada? pon tu código para que se te pueda ayudar.

Saludos.

tempto · #3 (**permalink**) 10/03/2010, 03:59

Aquí está la función:

Código HTML:

 <script type="text/javascript">
            $(".tooltip a").mouseover(function(){
                $('label[for="' + $(this).attr("class") + '"]').show();
				$('label[for="' + $(this).attr("class") + '"]').fadeOut(), 5000 });
        </script>

La función muestra un tooltip si se pasa por un enlace con la clase .tooltip y el mensaje que muestra es el que está dentro de la etiqueta label en el html
Estoy utilizando JQuery 1.3.2

buzu · #4 (**permalink**) 10/03/2010, 11:19

Eso es jquery, ese tipo de preguntas ponlas en el subforo de frameworks. Te digo que la forma de ir es con un setTimeout...

PD. Pide a un moderador que te mueva el tema al subforo de frameworks.

JavierB · #5 (**permalink**) 10/03/2010, 11:22

Hola tempto

Muevo tu tema al foro de Frameworks desde Javascript.

Saludos,

tempto · #6 (**permalink**) 10/03/2010, 11:56

Cómo utilizo setTimeout?

Gracias por mover el hilo

mayid · #7 (**permalink**) 10/03/2010, 12:09

Cita:

$('label[for="' + $(this).attr("class") + '"]').fadeOut(), 5000 });

Se usa así, con comillas:
setTimeout("funciones", tiempo)

setTimeout("$('label[for=' + $(this).attr(\"class\") + ']').fadeOut()"), 5000 });

Se complica por que tenes muchas comillas. Probalo. Pero mejor, asi:

Cita:

obj = $('label[for="' + $(this).attr("class") + '"]');

obj.show();

setTimeout("obj.fadeOut('fast')", 5000 });

Y si todavía no funciona, quizas la variables vaya entre parentesis.

$(obj).show();

tempto · #8 (**permalink**) 10/03/2010, 14:49

Sigue sin salirme

esto es lo que tengo puesto:

Código HTML:

<script type="text/javascript">
    $(".tooltip a").mouseover(function(){
        obj = $('label[for="' + $(this).attr("class") + '"]');
        $(obj).show();
        $(obj).setTimeOut("obj.fadeOut('fast')", 3000)
    });
</script>

mayid · #9 (**permalink**) 10/03/2010, 15:51

Cita:

setTimeOut

Out se escribe con minusculas. SetTimeout.

tempto · #10 (**permalink**) 10/03/2010, 15:59

Pero aún así sigue sin hacer el fadeOut

mayid · #11 (**permalink**) 10/03/2010, 16:23

Que error te da?

En el ultmio ejemplo puse la s mayuscula. Pero es minuscula.

Proba esto a ver si anda.

Cita:

setTimeout("$('body').fadeOut()"), 5000)

tempto · #12 (**permalink**) 10/03/2010, 16:30

Con el otro no me dá ningún error, simplemente sale el tooltip, pero no desaparece al tiempo, utilizo dreamweaver y no me dice nada del error.
Sin embargo, con lo que me acabas de postear sí que me dá una advertencia, dice que hay un error en la línea y que es posible que no funcione hasta que lo resuelva.

mayid · #13 (**permalink**) 10/03/2010, 17:38

Que raro que te de error. Ahora la sintaxis es correcta. Fijate que setTimeout() es MUY quisquilloso. Pero si lo escribis como te lo planteé, debería funcionar. Yo lo usé mil veces la semana pasada.

Debe ser que te faltan los puntos y comas. Probá así:

setTimeout("$('body').fadeOut('fast');"), 5000);

Te repito que esta función es MUY quisquillosa.

Dany_s · #14 (**permalink**) 10/03/2010, 18:53

si usas jquery 1.4 podes usar la función delay

fijate el ejemplo http://api.jquery.com/delay/

Dany_s · #15 (**permalink**) 11/03/2010, 06:51

pasa que le estas diciendo que cuando hace el mouseover aparezca y desaparezca por eso el parpadeo

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $(document).ready( function (){
        $(".tooltip a").mouseover( function(){
            label = $('label[for="' + $(this).attr("class") + '"]').show(500);
            label.delay(5000).hide(500);
        });
    });
  </script>
  <style>
      label{background-color:blue; display:none}
  </style>
</head>
<body>
<div class="tooltip">
    <label for="miClase"> asd </label>
    <a href="#" class="miClase">link</a>
</div>
</body>
</html>

lo que hago es seleccionar el label y mostrarlo, a la vez guardo el objeto en la variable label, después al objeto que está en la variable label le aplico un delay de 5 segundos para que luego lo esconda

ojo que delay() esta disponoble en la versión 1.4

con setTimeout

Código HTML:

 <script>
    $(document).ready( function (){
        $(".tooltip a").mouseover( function(){
            label = $('label[for="' + $(this).attr("class") + '"]').show(500);
            setTimeout("esconder()",5000);
        });
    });
    function esconder(){
        label.hide(500)
    }
  </script>

tambien en vez de crear una función para esconder podes pasar como parámetro label.hide(500) a setTimeout entre comillas

mayid · #16 (**permalink**) 11/03/2010, 08:26

Ah! Encontré el error. Teníamos un parentesis de mas!

Esto funciona. Lo probé en mi maquina:

Cita:

setTimeout("$('body').fadeOut('fast');", 2000);

tempto · #17 (**permalink**) 11/03/2010, 08:34

Ahora sí, por fin

Muchas gracias a todos