몇 초 후에 div를 숨 깁니다

StackOverflow https://stackoverflow.com/questions/820951

  •  03-07-2019
  •  | 
  •  

문제

나는 몇 초 후에 어떻게 jQuery에서 div를 숨길 수 있습니까? 예를 들어 Gmail의 메시지처럼.

최선을 다했지만 작동 할 수 없습니다.

도움이 되었습니까?

해결책

이것은 1 초 후 DIV를 숨 깁니다 (1000 밀리 초).

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds
#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>

페이드를하지 않고 숨기고 싶다면 사용하십시오. hide().

다른 팁

당신은 시도 할 수 있습니다 .delay()

$(".formSentMsg").delay(3200).fadeOut(300);

DIV를 호출하여 지연 시간을 밀리 초로 설정하고 변경하려는 속성을 설정하십시오.이 경우 .fadeout ()를 사용하여 애니메이션을 만들 수 있지만 .hide ()도 사용할 수 있습니다.

http://api.jquery.com/delay/

이 작업을 수행하는 정말 간단한 방법이 있습니다.

문제는 .Delay가 애니메이션에만 영향을 미치기 때문에 .hide ()가 지속 시간을 제공하여 애니메이션처럼 행동하는 것입니다.

$("#whatever").delay().hide(1);

짧은 시간을 보내면 일반 .HIDE 기능과 마찬가지로 즉각적인 것으로 보입니다.

JQuery는 시간이 지정된 방식으로 DIV를 숨기는 다양한 방법을 제공하여 간격 타이머 또는 기타 이벤트 처리기를 설정하거나 청소하거나 재설정 할 필요가 없습니다. 다음은 몇 가지 예입니다.

순수한 가죽, 1 초 지연 

// hide in one second
$('#mydiv').delay(1000).hide(0);

순수한 가죽, 지연 없음 

// hide immediately
$('#mydiv').delay(0).hide(0);

애니메이션 가죽 

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500);

사라지다

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300);

또한 메소드는 큐 이름이나 기능을 두 번째 매개 변수로 가져갈 수 있습니다 (메소드에 따라 다름). 위의 모든 통화 및 기타 관련 통화에 대한 문서는 다음과 같습니다.https://api.jquery.com/category/effects/

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

에서 http://james.padolsey.com/javaScript/jquery-delay-plugin/

(방법의 체인 허용)

jQuery 타이머를 사용하면 객체에 첨부 된 타이머와 관련된 이름을 가질 수 있습니다. 따라서 여러 타이머를 물체에 부착하고 그 중 하나를 멈출 수 있습니다.

$("#myid").oneTime(1000, "mytimer1" function() {
  $("#something").hide();
}).oneTime(2000, "mytimer2" function() {
  $("#somethingelse").show();  
});

$("#myid").stopTime("mytimer2");

평가 함수 (및 친척, 기능, Settimeout 및 SetInterval)는 JavaScript 컴파일러에 대한 액세스를 제공합니다. 이것은 때때로 필요하지만 대부분의 경우 코딩이 극도로 나쁘다는 것을 나타냅니다. 평가 함수는 JavaScript의 가장 잘못 사용되는 기능입니다.

http://www.jslint.com/lint.html

아마도 가장 쉬운 방법은 타이머 플러그인을 사용하는 것입니다. http://plugins.jquery.com/project/timers 그런 다음 같은 것을 부릅니다

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

우리는 직접 사용할 수 있습니다

$('#selector').delay(5000).fadeOut('slow');
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top