将jQuery delay（）与css（）一起使用

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

$（'#tipper'）.mouseout（函数（）{
$（'tip'）。延迟（800）。淡出（100）；
});

但这并没有推迟：

$（'#tipper'）.mouseout（函数（）{
$（'tip'）.delay（800）.css（'display'，'none'）；
});

//编辑-这里有一个有效的解决方案

//编辑2-修复了一些错误

$（'#tipper'）.mouseleave（函数（）{
setTimeout（函数（）{
$（'tip'）.css（{'display'，'none'}）；
},800);
});

适用于动画（fx）。更改css属性不能通过该机制工作，因此不受delay指令的影响

有一种解决方法--您可以将属性更改作为排队操作注入，如下所示：

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

另外，您可能应该使用

.hide（）

而不是

.css（'display'，'none'）

下面是一个工作示例：

添加到Ken Redler的答案/建议中：

另外，您可能应该使用 .hide（）而不是 .css（'display'，'none'）

你可以做：

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

---

0

在这里很重要。将值传递给

.hide（）

将隐式地将其添加到fx队列，因此，这将像预期的那样工作。

使用所有浏览器测试

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

---

一个小小的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' })

这是定义链接动画的一种相当优雅的方式。请注意，在这种非常简单的形式中，qcss只支持包含CSS属性的单个对象参数。（例如，为了支持

.qcss（'color'，'blue'）

，您需要做更多的工作。）

---

这是关于JSFIDLE的。

谢谢。为什么hide（）比设置CSS好？嘿，我知道这是一篇老文章，但是有人能解释一下为什么在设置CSS后必须调用“next（）”函数吗。我正在使用它，它工作得非常好，我只是想了解它是如何工作的works@ChrisG-Jones，发生的情况是，您正在排队的函数（在上面的例子中是匿名函数）自动将另一个函数传递给它，该函数将使下一个项目出列（移动队列）。上面我把这个论点命名为“下一个”，尽管你可以随意命名。因此，在匿名函数中，“next”现在是一个函数，当被调用时，它会推进队列。如果在匿名函数结束时调用

next（）

，队列（fx队列）中的其他任何东西都不会运行。@KenRedler感谢您的解释，它现在开始有意义了。我尝试了相对较少的元素，并且在浏览器中遇到了慢动作行为！知道为什么吗？@YanFoto，在jsFiddle上设置一个测试用例，这样我们就可以看一看了。非常酷！绝对干净！谢谢你。排队css=

qcss

。。哈我知道你在那里做了什么！：D这需要进入下一个jQuery版本。谢谢你的好话：）