¿Por qué funciona delay() aquí?
$('#tipper').mouseout(function() { $('#tip').delay(800).fadeOut(100); });Pero esto no retrasa:
$('#tipper').mouseout(function() { $('#tip').delay(800).css('display','none'); });// EDITAR - aquí hay una solución que funciona
// EDITAR 2 - algunos errores corregidos
$('#tipper').mouseleave(function() { setTimeout( function(){ $('#tip').css({'display','none'}); },800); });delay() funciona con la cola de animación (fx). Cambiar una propiedad css no funciona a través de ese mecanismo y, por lo tanto, no se ve afectado por la directiva de retraso.
Hay una solución: puede inyectar el cambio de propiedad como una operación en cola, como esta:
$('#tip') .delay(800) .queue(function (next) { $(this).css('display', 'none'); next(); }); Además, probablemente debería usar .hide() en lugar de .css('display','none') .
Aquí hay un ejemplo de trabajo: http://jsfiddle.net/redler/DgL3m/
Una pequeña extensión jQuery puede ayudar con esto. Podrías llamarlo qcss :
$.fn.extend({ qcss: function(css) { return $(this).queue(function(next) { $(this).css(css); next(); }); } });Esto te permite escribir:
$('.an_element') .delay(750) .qcss({ backgroundColor: 'skyblue' }) .delay(750) .qcss({ backgroundColor: 'springgreen' }) .delay(750) .qcss({ backgroundColor: 'pink' }) .delay(750) .qcss({ backgroundColor: 'slategray' }) Esta puede ser una forma razonablemente elegante de definir una animación encadenada. Tenga en cuenta que en esta forma tan simple, qcss solo admite un único argumento de objeto que contiene propiedades CSS. (Tendrías que trabajar un poco más para admitir .qcss('color', 'blue') por ejemplo).
Aquí hay un ejemplo en jsfiddle.
Agregado a la respuesta / sugerencia de Ken Redler :
Además, probablemente debería usar .hide() en lugar de .css('display','none').
Tu puedes hacer :
$('#tip').delay(800).hide(0); El 0 es importante aquí. Pasar un valor a .hide() lo agregará implícitamente a la cola fx y, por lo tanto, funcionará como se esperaba.