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/
next() at the end of the anonymous function, nothing else in the queue (the fx queue) would run.
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.
qcss .. ha! I see what you did there! :D This needs to go into next jQuery version.
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();
});
});
