Delay() и fadeOut() не задерживают attr() в очереди

что в этом коде не так? Я пытаюсь получить этот эффект: fadeOut(500) и attr('class','myClass') задержка на 600 миллисекунд. Затем delay(600) снова и fadeIn(500). Задержки происходят правильно, но attr() не задерживается, он срабатывает, когда #myDiv все еще исчезает!: '(

$('#myDiv').fadeOut(500)
           .delay(600)
           .attr('class','myClass')
           .delay(600)
           .fadeIn(500);

Ответ 1

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

Чтобы связать вызов .attr(), вы должны добавить его в качестве обратного вызова в ту же очередь, используя .queue(), например:

$('#myDiv').fadeOut(500)
           .delay(600)
           .queue(function(next) { $(this).attr('class','myClass'); next(); })
           .delay(600)
           .fadeIn(500);

Также обратите внимание: .addClass(), .removeClass() и .toggleClass(), которые могут сделать это немного чище:)