Использование jQuery delay() с помощью css()

Почему здесь работает функция delay():

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

Но это не задерживается:

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

//EDIT - здесь работает решение

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

Ответы

Ответ 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/

Ответ 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') необходимо выполнить немного больше работы).

Heres пример на jsfiddle.

Ответ 3

Добавлен ответ/предложение Кена Редлера:

Кроме того, вы, вероятно, должны использовать .hide() вместо .css( 'дисплей', 'ни').

Вы можете сделать:

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

Здесь важна 0. Передача значения в .hide() будет неявно добавлять его в очередь fx, и поэтому это будет работать как ожидалось.

Ответ 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();
    }); 
});