jQuery: Dapatkah saya memanggil delay () antara addClass () dan semacamnya?

Sesuatu yang sederhana seperti:

$("#div").addClass("error").delay(1000).removeClass("error");

sepertinya tidak berfungsi. Apa yang akan menjadi alternatif termudah?

Anda dapat membuat item antrian baru untuk menghapus kelas:

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

Atau menggunakan metode dequeue :

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

Alasan Anda perlu menelepon nextatau dequeuememberi tahu jQuery bahwa Anda telah selesai dengan item yang antri ini dan harus pindah ke item berikutnya.

AFAIK metode penundaan hanya berfungsi untuk modifikasi CSS numerik.

Untuk keperluan lain, JavaScript hadir dengan metode setTimeout:

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

Saya tahu ini posting yang sangat lama tetapi saya telah menggabungkan beberapa jawaban ke dalam fungsi pembungkus jQuery yang mendukung perangkaian. Semoga bermanfaat bagi seseorang:

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

Dan inilah pembungkus removeClass:

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

Sekarang Anda dapat melakukan hal-hal seperti ini - tunggu 1dtk, tambahkan .error, tunggu 3dtk, hapus .error:

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

Manipulasi CSS jQuery tidak di-antri, tetapi Anda dapat membuatnya dieksekusi di dalam antrian 'fx' dengan melakukan:

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

Hal yang sama seperti memanggil setTimeout tetapi menggunakan mekanisme antrian jQuery sebagai gantinya.

Tentu saja akan lebih sederhana jika Anda memperpanjang jQuery seperti ini:

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

setelah itu Anda bisa menggunakan fungsi ini seperti addClass:

$('div').addClassDelay('clicked',1000);

Keterlambatan beroperasi dalam antrian. dan sejauh yang saya tahu manipulasi css (selain melalui bernyawa) tidak mengantri.

delaytidak berfungsi pada fungsi tidak ada antrian, jadi kita harus menggunakan setTimeout().

Dan Anda tidak perlu memisahkan hal-hal. Yang perlu Anda lakukan adalah memasukkan semuanya dalam suatu setTimeOutmetode:

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

Coba ini:

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

Coba funtion panah sederhana ini:

setTimeout( () => { $("#div").addClass("error") }, 900 );