Question

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

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

但是这没有延迟：

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

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

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

Answer 1

delay()适用于动画（fx）queue。更改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' })

这可以是定义链式动画的一种相当优雅的方式。请注意，在这个非常简单的形式中，qcss仅支持包含CSS属性的单个对象参数。（例如，您需要做更多工作来支持.qcss('color', 'blue')。）

这是关于jsfiddle的an example。

Answer 3

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

另外，你可能应该使用 .hide（）代替的CSS（ '显示'， '无'）。

你可以这样做：

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

0在这里很重要。将值传递给.hide()会将其隐式添加到 fx队列，因此，这将按预期工作。

Answer 4

使用所有浏览器进行测试

$(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 delay（）和css（）

4 个答案: