使用 jQuery delay() 和 css()答案

【问题标题】：Using jQuery delay() with css()使用 jQuery delay() 和 css()
【发布时间】：2011-07-20 17:56:55
【问题描述】：

为什么 delay() 在这里起作用：

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

但这并没有延迟：

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

// 编辑 - 这是一个可行的解决方案

// EDIT 2 - 修复了一些错误

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

【问题讨论】：

标签： jquery

【解决方案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/

【讨论】：

嘿，我知道这是一篇旧帖子，但有人可以解释一下为什么在设置 css 后必须调用 'next()' 函数。我正在使用它，它工作得非常好我只是想了解它是如何工作的
@ChrisG-Jones，发生的情况是您正在排队的函数（在上述匿名函数的情况下）已自动传递给它另一个函数，它将出队下一项（移动队列）。上面我将该参数命名为“next”，尽管您可以将其命名为任何您喜欢的名称。因此，在匿名函数内部，“next”现在是一个函数，当被调用时，它会推进队列。如果我未能在匿名函数结束时调用 next()，则队列（fx 队列）中的其他任何内容都不会运行。
@KenRedler 感谢您的解释，现在开始有意义了。
我尝试了相对较少的元素，并且在浏览器中遇到了慢动作行为！任何想法为什么？
@YanFoto，在jsFiddle上设置一个测试用例，我们可以看看。

【解决方案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。

【讨论】：

非常酷！绝对整洁！向你致敬。排队 css = qcss .. 哈！我看到你在那里做了什么！ :D 这需要进入下一个 jQuery 版本。
谢谢你的好话 :)

【解决方案3】：

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

另外，您可能应该使用 .hide() 而不是 .css('display','none').

你可以这样做：

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

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

【讨论】：

谢谢。为什么 hide() 比设置 CSS 更好？

【解决方案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();
    }); 
});

【讨论】：