Usando retraso jQuery() con css()

Question

¿Por qué retardo() trabajan aquí:

$('#tipper').mouseout(function() { 
    $('#tip').delay(800).fadeOut(100); 
}); 

Pero esto no funciona para retrasar:

$('#tipper').mouseout(function() { 
    $('#tip').delay(800).css('display','none'); 
}); 

// EDITAR - aquí está una solución de trabajo

$('#tipper').mouseleave(function() { 
    setTimeout(function(){ 
    $('#tip').css('display','none'); 
     },800); 
}); 

Answer 1

delay() funciona con la animación (fx) queue. 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 - se puede inyectar el cambio de propiedad como una operación en cola, así:

$('#tip') 
    .delay(800) 
    .queue(function (next) { 
    $(this).css('display', 'none'); 
    next(); 
    }); 

Además, es probable que debe utilizar en lugar de .hide().css('display','none').

Aquí está un ejemplo de trabajo: http://jsfiddle.net/redler/DgL3m/

Answer 2

Agregado a respuesta/sugerencia de Ken Redler:

Además, es probable que debe utilizar .hide() en lugar de css ('display ','ninguna').

que puede 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.

Answer 3

prueba con todos los navegadores

$(document).ready(function() { 
    var id = $("div#1"); // div id=1 
    var color = "lightblue"; // color to highlight 
    var delayms = "800"; // mseconds to stay color 
    $(id).css("backgroundColor",color) 
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g 
    .css("backgroundColor",color).delay(delayms).queue(function() { 
     $(id).css("backgroundColor",""); 
     $(id).dequeue(); 
    }); 
}); 

Answer 4

Una pequeña extensión de jQuery puede ayudar con esto. Se le puede llamar qcss:

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

Esto le 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 manera bastante elegante para definir una animación encadenado. Tenga en cuenta que en esta forma tan simple, qcss solo admite un único argumento de objeto que contiene propiedades de CSS. (Tendría que hacer un poco más de trabajo para admitir .qcss('color', 'blue'), por ejemplo.)

Aquí está an example en jsfiddle.