¿Función de retraso de CSS en Jquery?

Question

¿Cómo puedo retrasar un cambio de CSS en jquery? Aquí está mi código:

$("document").ready(function() { 
    $(".pressimage img").mouseenter(function() { 
     $jq(this).css('z-index','1000'); 
      }); 
    $(".pressimage img").mouseleave(1000,function() { 
     $jq(this).css('z-index','1'); 
      }); 
}); 

Necesito la función mouseleave que ocurra alrededor de 1/2 de un segundo después de que las hojas del ratón.

Uso de algunos otros jquery para hacer que las imágenes se amplíen con el mouseover. Cuando se expanden, se cubren entre sí, por lo que necesito que el índice z de la imagen animada sea más alto que el otro. Luego, cuando el mouse se va, el índice z tiene que volver a la normalidad.

El código anterior funciona, excepto que el índice z cambia tan pronto como el mouse se va, por lo que la animación no tiene tiempo para completarse. Por lo tanto, necesito retrasar un poco la función mouseleave. Gracias

ACTUALIZACIÓN

Aquí está mi sitio: http://smartpeopletalkfast.co.uk/ppr6/press

He puesto mi código en la cabeza:

$jq("document").ready(function() { 

    $jq(".pressimage img").mouseenter(function() { 
     $jq(this).css('z-index','100'); 
      }); 

    $jq(".pressimage img").mouseleave(function() { 
     $jq(this).css('z-index','1'); 
      }); 

}); 

Este código está trabajando bien, pero no tiene ninguna demora. Si pasa el puntero sobre la imagen superior izquierda, funciona bien, pero tan pronto como suelta el mouse va detrás de la imagen debajo de él. Gracias

Answer 1

Prueba esto:

$(".pressimage img").mouseleave(function(){ 
    var that = this; 
    setTimeout(function(){ 
     $(that).css('z-index','1'); 
    },500); 
}); 

Answer 2

$("document").ready(function() { 
$(".pressimage img").mouseenter(function() { 
    $jq(this).css('z-index','1000'); 
     }); 
$(".pressimage img").mouseleave(1000,function() { 
    $jq(this).delay(500).css('z-index','1'); 
     }); 
}); 

hace este trabajo? :)

Answer 3

http://jsfiddle.net/loktar/yK5ga/

Compruebe que uno fuera lo que estoy haciendo está asignando el tiempo de espera a una variable y luego borrarlo en mouseover, por lo que el fuego planteo si lo hace un ratón por encima rápidamente.

$("document").ready(function() { 
    var imgTimeout; 

    $("img").hover(
     function() { 
      clearTimeout(imgTimeout); 
      $(this).css('z-index','1000'); 
    }, 
    function() { 
     var element = $(this); 
     imgTimeout = setTimeout(function(){element.css('z-index','1');}, 1000); 
    }); 
}); 

Answer 4

Puede hacer esto con setTimeout();

$("document").ready(function() { 
    var timer; 
    $(".pressimage img").mouseenter(function() { 
     $jq(this).css('z-index','1000'); 
     clearTimeout(timer); 
    }); 
    $(".pressimage img").mouseleave(1000,function() { 
     timer = setTimeout(function(){ 
      $jq(this).css('z-index','1'); 
     }, 500); 
    }); 
}); 

El código en setTimeout (código, retardo) se ejecuta después de retardo milisegundos. Es posible que tenga problemas con los cambios involuntarios si tuviera que mover el mouse demasiado rápido, por lo que he borrado la acción de tiempo de espera en mouseenter().

Answer 5

Nota que la solución de sanon anterior es más natural que éste, ya que utiliza el método de jQuery .queue en lugar de abusar de .animate para el mismo propósito.

Respuesta original a continuación:

---

setTimeout es la forma más natural de ir, pero si usted desea permanecer en su cadena de función jQuery, puede utilizar una función animado con una duración 0.

Ejemplo:

$("img").delay(1000).animate({'z-index': 1000},0) 

Si desea hacer cualquier otra cosa que los cambios css numéricos, entonces sí es necesario para crear una función, pero que todavía puede suceder dentro de esa llamada animado:

$("img").delay(1000).animate({zoom:1},0,function(){$(this).src('otherImage.png');}) 

Acabo de poner ese zoom: 1 porque si especifica un objeto vacío {} allí, no se considera un efecto real, por lo que no entra en la cola de efectos, por lo que ejecuta inmediatamente la función completa.

Answer 6

Intente lo siguiente.

jQuery.fn.extend({ 
    qcss: function(map){ 
     $(this).queue(function(next){ 
      $(this).css(map); 
      next(); 
     }); 

     return this; 
    } 
}); 

Answer 7

retardo sólo funciona en elementos de la cola por lo que necesita para agregar su cambio css a la cola de la demora para trabajar. Luego dequeue. El código siguiente ilustra esto:

$('.pressimage img') 
    .delay(1000) 
    .queue(function(){ 
     $(this).css({'z-index','1'}); 
     $(this).dequeue(); 
    }); 

Answer 8

http://forum.jquery.com/topic/delay-css

ensayar y trabajar para mi propósito de retrasar una propiedad CSS siguiendo un ser animado.