在CSS()中使用jQuery delay()

本文介绍了在CSS()中使用jQuery delay()的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Why does delay() work here:

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

但这无法延迟:

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

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

// EDIT - here's a working solution

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

推荐答案

delay() 适用于动画(fx) 队列.更改css属性无法通过该机制进行操作，因此不受delay指令的影响.

delay() works with the animation (fx) queue. Changing a css property does not work via that mechanism, and thus is not affected by the delay directive.

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

There is a workaround -- you can inject the property change as a queued operation, like this:

$('#tip')
  .delay(800)
  .queue(function (next) { 
    $(this).css('display', 'none'); 
    next(); 
  });

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

Also, you should probably be using .hide() instead of .css('display','none').

这是一个工作示例: http://jsfiddle.net/redler/DgL3m/

这篇关于在CSS()中使用jQuery delay()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Delay