JQuery .delay() не работает

Question

Я следующее JavaScript фрагмент код:

$("#dashboard").addClass("standby").delay(3000).removeClass("standby"); 
$(".active").removeClass("active"); 
$("." + target).addClass("active"); 
$(".showDiv").removeClass("showDiv").addClass("hide"); 
$("#" + target).removeClass("hide").addClass("showDiv"); 

Хотя #dashboardнаходится в режиме ожидания, он должен обрабатывать изменения всего этот CSS-класс. После этого он должен снова отобразить #dashboard. Поэтому я установил delay() между добавлением и удалением класса standby. Чтобы узнать, работает ли это, я добавил слишком длинную продолжительность 3sek.

Но это не задерживается! Почему это не так? Я не вижу этого ...

Answer 1

delay будет работать только над действиями, проходящими через конвейер анимации, и не будет влиять на синхронизацию мгновенных атомных операций, подобных этому. Чтобы задержать такие вещи, как добавление или удаление классов, вы можете использовать setTimeout.

Метод .delay() позволяет нам задержать выполнение функций, следующих за ним в очереди. Он может использоваться со стандартной очередью эффектов или с пользовательской очередью.

Метод .delay() лучше всего задерживать между обработанными в очереди эффектами jQuery. Поскольку он ограничен - он, например, не предлагает способ отмены задержки. .Delay() не является заменой встроенной функции setTimeout для JavaScript, что может быть более подходящим для определенных случаев использования.

Answer 2

.delay() задерживает анимацию только в jQuery. Чтобы установить фактическую задержку, вы можете использовать setTimeout().

setTimeout(function() { 
... do stuff ... 
}, 3000); 

Answer 3

Похоже на то, что вы пытаетесь сделать, вы можете захотеть взглянуть на CSS переходы:

http://css-tricks.com/almanac/properties/t/transition/

Вы все еще можете иметь .addClass(), за исключением того, теперь ваш класс будет использовать эти свойства перехода, и вам не понадобится .delay().

Answer 4

Обычно нам нужно сделать что-то перед удалением состояния ожидания, поэтому мы удаляем класс в AJAX обратного вызова:

$("#dashboard").addClass("standby"); 
$.get('urltoget',function(data){ 
    if(data) 
    $("#dashboard").removeClass("standby"); 
    else 
    $("#dashboard").removeClass("standby").addClass('error'); 
}) 

Answer 5

Задержка не будет работать так, как вы ожидаете, что на этих строках:

$("#image1").delay(9000).attr("src", "image/image1.jpg"); 
$("#image1").delay(9000).attr("src", "image/image2.jpg"); 

Он немедленно заменит атрибут. Зачем? Потому что изменение атрибута не является частью «анимации». Задержка может использоваться только с анимационными функциями.

Если вам нужны только два изображения, вам может быть проще всего иметь два изображения, сложенные вместе, и при необходимости выцветать.

Если вы хотите, чтобы развернуть это на многие изображения, попробуйте использовать более прочную функцию «.animate», чтобы затухать и исчезать. «Анимация» может быть задана функция обратного вызова, которая будет вызываться при завершении.

Answer 6

Все ваши задержки запуска на $(document).ready();

$("#image1").delay(5000).fadeIn(3000); 
$("#image1").delay(9000).attr("src", "image/image1.jpg"); 
$("#image1").delay(5000).fadeOut(3000); 
$("#image1").delay(9000).attr("src", "image/image2.jpg"); 
$("#image1").delay(5000).fadeIn(3000); 
$("#image1").delay(5000).fadeOut(3000); 

думать об этом таким образом. Когда doc готов, JS начинает выполнять все, что находится внутри этой функции, первая задержка выполняется следующим образом: $("#image1").delay(5000).fadeIn(3000);

Это будет НАЧАТЬ задержку в 5000 мс, а затем fadeOut() с продолжительностью 3000 мс. Этот fadeOut является синхронным с задержкой, но следующая строка кода полностью асинхронна к этой.

Затем он переходит к следующей строке. И так далее. Он не будет ждать окончания вашей задержки, он просто начинает отсчитывать фон.

.delay() НЕ суммируется при применении к одному элементу: JSFiddle

я оставляю это только в случае, если кто-то спутать, как я был

Answer 7

Как указано ... задержка не будет работать так, как вы ожидаете ... Вот как это работает:

$(document).ready(function(){   
 
    var audio = new Audio('sang3.mp3'); 
 
    audio.play(); 
 

 
    $("#image1") 
 
     .hide() 
 
     .attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250") 
 
     .fadeIn(1000) 
 
     .delay(3000) 
 
     .fadeOut(1000) 
 
     .queue(function(next) { 
 
      $(this).attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-2&w=350&h=250") 
 
      next(); 
 
     }) 
 
     .fadeIn(1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<img src="" id="image1">

Answer 8

Попробуйте с использованием .queue()

$("#image1").delay(5000).fadeIn(3000, function() { 
     $(this).delay(9000, "task").queue("task", function() { 
     $(this).attr("src", "image/image1.jpg") 
     .delay(5000).fadeOut(3000, function() { 
      $(this).delay(9000, "task") 
      .queue("task", function() { 
      $(this).attr("src", "image/image2.jpg") 
      .delay(5000).fadeIn(3000, function() { 
       $(this).delay(5000).fadeOut(3000) 
      }) 
      }).dequeue("task") 
     }); 
     }).dequeue("task") 
    });