Могу ли я отложить jQuery addClass?

Question

Есть ли способ отложить addClass() в jQuery?Например, этот код

$('#sampleID').delay(2000).fadeOut(500).delay(2000).addClass('aNewClass');

Когда я загружаю страницу, она уже имеет класс 'aNewClass' с идентификатором 'sampleID'.Как решить эту проблему?Что я хочу, так это то, что addClass произойдет после того, как закончится fadeOut().

Answer 1

Вы не можете напрямую отложить вызов addClass, однако вы можете сделать это, если поместите его в вызов очереди, который принимает функцию в качестве параметра, подобного этому

$(this).delay(2000).queue(function(){$(this).addClass('aNewClass')});

См. Этот пост: jQuery: Могу ли я вызвать delay () между addClass () и тому подобное?

Answer 2

То, что я хочу, это addClass будет произойдет после того, как закончится fadeOut () .

Вы можете использовать функцию обратного вызова для fadeOut, например:

$('#sampleID').fadeOut(500, function(){
  $(this).addClass('aNewClass');
});

Answer 3

Вы не можете сделать это с delay, потому что это влияет только на очередь эффектов. Он не приостанавливает выполнение более позднего кода, если он не реализован с использованием очереди.

Вам нужно сделать это с setTimeout:

$('#sampleID').delay(2000).fadeOut(500, function() {
    setTimeout(function() {
        $(this).addClass('aNewClass');
    }, 2000);
});

При этом используется обратный вызов complete, равный fadeOut, и затем устанавливается функция для выполнения в течение 2 секунд в будущем.

Answer 4

Вы также можете использовать setTimeout с CSS-переходом:

setTimeout(function() {
    $('#sampleID').addClass('aNewClass');
}, 2000);

И CSS

#sampleID {
transition: opacity 1s ease;
opacity: 0;
}

#sampleID.aNewClass {
opacity: 1;
}

Answer 5

Вы должны использовать обратные вызовы.

$('#sampleID').delay(2000).fadeOut(500,function(){
   $(this).delay(2000).addClass('aNewClass');
});

http://api.jquery.com/fadeOut/