使用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

delay()适用于动画(fx)队列.更改css属性不适用于该机制,因此不受delay指令的影响.

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

$('#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 的一个例子.

Answer 3

添加到Ken Redler的回答/建议:

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

你可以做 :

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

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