jQuery : addClass ()와 delay 사이에 delay ()를 호출 할 수 있습니까?

다음과 같은 간단한 것 :

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

작동하지 않는 것 같습니다. 가장 쉬운 대안은 무엇입니까?

클래스를 제거하기 위해 새 대기열 항목을 만들 수 있습니다.

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

또는 dequeue 방법을 사용하십시오 .

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

당신이 호출해야하는 이유 next또는 dequeuejQuery를 사용하면이 대기중인 항목으로 수행되는 것을 알고는 다음 단계로 이동해야 할 것입니다.

AFAIK 지연 방법은 숫자 CSS 수정에만 작동합니다.

다른 목적으로 JavaScript에는 setTimeout 메소드가 제공됩니다.

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

나는 이것이 매우 오래된 게시물이라는 것을 알고 있지만 몇 가지 답변을 체인을 지원하는 jQuery 래퍼 함수로 결합했습니다. 누군가에게 도움이되기를 바랍니다.

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

다음은 removeClass 래퍼입니다.

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

이제 다음과 같은 작업을 수행 할 수 있습니다-1 초 대기, 추가 .error, 3 초 대기, 제거 .error:

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

jQuery의 CSS 조작은 대기열에 들어 있지 않지만 다음을 수행하여 'fx'대기열 내에서 실행할 수 있습니다.

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

setTimeout을 호출하는 것과 거의 동일하지만 대신 jQuery의 큐 메커니즘을 사용합니다.

물론 다음과 같이 jQuery를 확장하면 더 간단합니다.

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

그 후에 addClass와 같은이 함수를 사용할 수 있습니다 :

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

지연은 큐에서 작동합니다. 내가 아는 한 CSS 조작 (애니메이션을 통하지 않고)은 대기열에 있지 않습니다.

delay대기열 기능 없음에서는 작동하지 않으므로을 사용해야합니다 setTimeout().

그리고 당신은 물건을 분리 할 필요가 없습니다. setTimeOut메소드에 모든 것을 포함시키기 만하면됩니다.

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

이 시도:

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

이 간단한 화살표 기능을 사용해보십시오.

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