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