在 css() 中使用 jQuery delay()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5396119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery delay() with css()
提问by jerrygarciuh
Why does delay() work here:
为什么 delay() 在这里工作：
$('#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
// 编辑 - 这是一个有效的解决方案
$('#tipper').mouseleave(function() {
setTimeout( function(){
$('#tip').css('display','none');
},800);
});
回答by Ken Redler
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.
delay()与动画 (fx)队列一起使用。更改 css 属性不能通过该机制工作，因此不受延迟指令的影响。
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').
此外，您可能应该使用.hide()而不是.css('display','none').
Here's a working example: http://jsfiddle.net/redler/DgL3m/
这是一个工作示例：http: //jsfiddle.net/redler/DgL3m/
回答by Benji XVI
A tiny jQuery extension can help with this. You might call it qcss:
一个小小的 jQuery 扩展可以帮助解决这个问题。你可以称之为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.)
这是定义链式动画的一种相当优雅的方式。请注意，在这种非常简单的形式中，qcss 仅支持包含 CSS 属性的单个对象参数。（例如，您必须做更多的工作来支持.qcss('color', 'blue')。）
Here's an exampleon jsfiddle.
回答by jAndy
Added to Ken Redler'sanswer / suggestion:
添加到Ken Redler 的回答/建议中：
Also, you should probably be using .hide() instead of .css('display','none').
此外，您可能应该使用 .hide() 而不是 .css('display','none')。
You can do :
你可以做 ：
$('#tip').delay(800).hide(0);
The 0is important here. Passing a value to .hide()will implicitly add it to the fx queueand therefore, this will work like expected.
这里0很重要。传递一个值.hide()将隐式添加到fx 队列，因此，这将按预期工作。
回答by Anton Dimitrov
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();
});
});
