使用jQuery延迟（）与CSS（）

为什么delay（）在这里工作：

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

但是这不能推迟：

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

//编辑 – 这是一个工作的解决scheme

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

Answer 1

delay()与animation（fx） 队列一起工作 。 改变CSS属性不能通过这个机制，因此不受延迟指令的影响。

有一个解决方法 – 你可以注入属性更改为一个排队的操作，如下所示：

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

另外，你应该使用.hide()而不是.css('display','none') 。

这是一个工作的例子： http : //jsfiddle.net/redler/DgL3m/

Answer 2

你可以写最小的jQuery扩展来帮助这个。 你可以把它叫做qcss ：

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

这让你写：

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

这可以是一个优雅的方式来链接animation的一部分。 请注意，在上面非常简单的forms中，qcss只支持包含CSS属性的单个对象参数。 （你需要做更多的工作来支持.qcss('color', 'blue') 。）

这里是一个 jsfiddle 的例子 。

Answer 3

Ken Redler的回答/build议增加了：

另外，你应该使用.hide（）而不是.css（'display'，'none'）。

你可以做 ：

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

这里0很重要。 将一个值传递给.hide()会隐式地将它添加到fx队列中 ，因此，这可以像预期的那样工作。

Answer 4

用所有浏览器进行testing

 $(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-*) eg .css("backgroundColor",color).delay(delayms).queue(function() { $(id).css("backgroundColor",""); $(id).dequeue(); }); });