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

Question

Использование 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);

});

507 4

jQuery

4 ответов:

Comments

Ничего не найдено.

Ken Redler · Accepted Answer · 2015-04-22 22:17:12

delay() работает с очередью анимации (fx) . Изменение css-свойства не работает через этот механизм и, следовательно, не зависит от директивы delay.

Существует обходной путь - вы можете ввести изменение свойства в виде операции в очереди, например:
$('#tip')
  .delay(800)
  .queue(function (next) { 
    $(this).css('display', 'none'); 
    next(); 
  });
Кроме того, вы, вероятно, должны использовать .hide() вместо .css('display','none').

Вот рабочий пример: http://jsfiddle.net/redler/DgL3m/

Benji XVI · Accepted Answer · 2017-12-09 11:35:04

Крошечное расширение 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.

jAndy · Accepted Answer · 2011-03-22 20:44:25

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

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

Вы можете сделать:
$('#tip').delay(800).hide(0);
Здесь важно 0. Передача значения в .hide() неявно добавит его в очередьfx , и поэтому это будет работать так, как ожидалось.

Anton Dimitrov · Accepted Answer · 2013-07-09 15:21:33

Тест со всеми браузерами

$(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();
    }); 
});