Using jQuery delay() with css()

Why does delay() work here:

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

But this fails to delay:

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

// EDIT - here's a working solution

// EDIT 2 - some bugs fixed

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

delay() works with the animation (fx) queue. Changing a css property does not work via that mechanism, and thus is not affected by the delay directive.

There is a workaround -- you can inject the property change as a queued operation, like this:

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

Also, you should probably be using .hide() instead of .css('display','none').

Here's a working example: http://jsfiddle.net/redler/DgL3m/

A tiny jQuery extension can help with this. You might call it qcss:

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

This lets you write:

$('.an_element')
   .delay(750)
   .qcss({ backgroundColor: 'skyblue' })
   .delay(750)
   .qcss({ backgroundColor: 'springgreen' })
   .delay(750)
   .qcss({ backgroundColor: 'pink' })
   .delay(750)
   .qcss({ backgroundColor: 'slategray' })

This can be a reasonably elegant way to define a chained animation. Note that in this very simple form, qcss only supports a single object argument containing CSS properties. (You’d have to do a bit more work to support .qcss('color', 'blue') for instance.)

Here’s an example on jsfiddle.

Added to Ken Redler's answer / suggestion:

> Also, you should probably be using > .hide() instead of > .css('display','none').

You can do :

$('#tip').delay(800).hide(0);

The 0 is important here. Passing a value to .hide() will implicitly add it to the fx queue and therefore, this will work like expected.

test with all browser

$(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();
    }); 
});