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? 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. el 23 jul. 2019 a las 18:31
  • lo que quieres es un efecto que puedes hacer con solo css y cambiando la clase el 23 jul. 2019 a las 18:32
  • 1
    agrega a tu clase css algo como transition-delay:1s; 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 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. 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. el 23 jul. 2019 a las 19:12
  • Si, tienes razón
    – ftorres
    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 el 23 jul. 2019 a las 18:23
  • Como dijo Jack, solo deseo que se ejecute con el hover de la funcion... pero gracias el 23 jul. 2019 a las 18:41

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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