1

Tengo una funcion que basicamente lo que hace es que cuando se hace Hover sobre un div es que aparece el Overflow en Y y cuando quito el mouse entonces se retira.

$("#todo").hover(
      function() {
        $( this ).css("overflow-y", "scroll");
      }, function() {
         $( this ).css("overflow-y", "hidden");
      }
    );

Sin embargo quiero causar un pequeño retardo cuando esto ocurra... En pocas palabras que cuando pase el mouse sobre el div pase 1 o 2 segundos antes de aparecer el scroll, en vez de aparecer inmediatamente.

6
  • Creo que te puede servir como hacer un sleep en javascript? Commented el 23 jul. 2019 a las 18:25
  • @the-breaker fue buena idea y la intente, gracias... sin embargo, causa un retraso por ejecución que me perjudica ahora. y segundo, me bloquea luego el hover... Pero fue gran idea gracias. Commented el 23 jul. 2019 a las 18:31
  • lo que quieres es un efecto que puedes hacer con solo css y cambiando la clase Commented el 23 jul. 2019 a las 18:32
  • 1
    agrega a tu clase css algo como transition-delay:1s; Commented el 23 jul. 2019 a las 18:33
  • Es exactamente lo que deseo lograr, pero haciendolo con CSS solo es imposible debido a que estoy añadiendo el hover con JS, y acabo de intentar añadirlo por JS de igual forma como añadi el otro css pero no me funciona el transition-delay Commented el 23 jul. 2019 a las 18:40

4 respuestas 4

2

Una forma de hacerlo es utilizar un setTimeout y si por cualquier motivo el elemento pierde el hover antes del tiempo estipulado, entonces se cancelará el setTimeout.

En el ejemplo que dejo se activa, pospone o dispara después de un segundo:

var idSetTimeout;

$("#todo").hover(function () {
    idSetTimeout = setTimeout(function (element) {
        if (element.is(":hover")) {
            element.css("overflow-y", "scroll");
        }
    }, 1000, $(this));
}, function () {
    clearTimeout(idSetTimeout);
    $(this).css("overflow-y", "hidden");
});

Si te fijas también se realiza una segunda validación donde se verifica si todavía está en hover para actualizar el css.

setTimeout: El método setTimeout() llama a una función o evalúa una expresión después de un número específico de milisegundos.

clearTimeout: El método clearTimeout() borra un temporizador configurado con el método setTimeout().

0

es sencillo

setTimeout(function(){ alert("Hello"); }, 3000);

en tu caso seria

$("#todo").hover(
  function() {
    $( this ).css("overflow-y", "scroll");
  }, function() {
     $( this ).css("overflow-y", "hidden");
  },3000
);

3000 = 3 segundos.

1
  • 1
    Gracias por comentar sin embargo @Artudoxo, eso no funciona. Commented el 23 jul. 2019 a las 18:26
0

Usa setTimeout pero de esta manera:

$("#todo").hover(
    function() {
        //Esta función permite ejecutar una función después
        //de n milisegundos, en tu caso serán 3000, que equivale a 3 segundos
        setTimeout(function(){
            $( this ).css("overflow-y", "scroll");
        }, 3000);
     }, function() {
         //Si también quieres lograr eso cuando el usuario retire el cursor, entonces aquí también necesitarás un setTimeout
         $( this ).css("overflow-y", "hidden");
     });

Eso debe servirte.

Sin embargo, dentro de la función que se ejecuta en el setTimeout, la referencia a this no será la misma que a $("#todo"), entonces tienes que usar:

$("#todo").css("overflow-y", "scroll");

El código quedaría así

$("#todo").hover(
    function() {
        setTimeout(function(){
            $("#todo").css("overflow-y", "scroll");
        }, 3000);
     }, function() {
         //Si también quieres lograr eso cuando el usuario retire el cursor, entonces aquí también necesitarás un setTimeout
         $( this ).css("overflow-y", "hidden");
     });

Recuerda que cada vez que selecciones o manipules el DOM usando la función $ de jQuery, estarás ejecutando una gran cantidad de código, una pequeña recomendación sería que guardes en una variable la referencia al objeto que seleccionaste, algo así

//Guardamos la referencia a este elemento u objeto, para su reutilización
var todo = $("#todo");

//
todo.hover(
    function() {
        setTimeout(function(){
            todo.css("overflow-y", "scroll");
        }, 3000);
     }, function() {
         //Si también quieres lograr eso cuando el usuario retire el cursor, entonces aquí también necesitarás un setTimeout
         todo.css("overflow-y", "hidden");
     });

Saludos

2
  • 1
    Si retiras el mouse antes de que se cumpla los 3 segundos, entonces se debe cancelar el setTimeout o por lo menos validar que no se aplique el css.
    – dlr
    Commented el 23 jul. 2019 a las 19:12
  • Si, tienes razón
    – ftorres
    Commented el 23 jul. 2019 a las 19:17
-2

puedes intentarlo con esto.

var a = setInterval(function(){ /*aquí tu código que quieras ejecutar*/ clearInterval(a);}, 3000);

asi solo se ejecuta a los 3 segundos y se detiene, ahí la pausa que requiere.

2
  • 1
    el usuario quiere una Pausa, no algo que se ejecute cada cierto tiempo Commented el 23 jul. 2019 a las 18:23
  • Como dijo Jack, solo deseo que se ejecute con el hover de la funcion... pero gracias Commented el 23 jul. 2019 a las 18:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.