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

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

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

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

10
addclass delay jquery

5 ответов

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

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

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

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

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

посмотреть этот пост: jQuery: могу ли я вызвать delay() между addClass() и такими?

21

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

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

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

использует complete вызов fadeOut а затем устанавливает функцию для выполнения 2 секунд в будущем.

1

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

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

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

0

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

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

и CSS

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

#sampleID.aNewClass {
opacity: 1;
}
0