使用jQuery delay（）和css（）

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

一个小小的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 的一个例子。