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

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

다음과 같은 간단한 것:

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

효과가 없는 것 같습니다.가장 쉬운 대안은 무엇일까요?

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

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

또는 대기열 해제 방법을 사용합니다.

$("#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초 동안 기다렸다가 추가합니다..error3초 대기, 제거.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 );

다른 방법은...

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

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

나중에 감사합니다.

언급URL : https://stackoverflow.com/questions/2510115/jquery-can-i-call-delay-between-addclass-and-such