몇 초 후에 div 숨기기

몇 초 후에 div 숨기기

몇 초 후에 어떻게 디브를 숨길 수 있을까요?예를 들어 Gmail의 메시지와 같습니다.

최선을 다했지만 작동이 안 됩니다.

이렇게 하면 1초(1000밀리초) 후에 div가 숨겨집니다.

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/

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/ 에서 확인할 수 있습니다.

정말 간단한 방법이 있습니다.

문제는 .delay가 애니메이션에만 영향을 미치기 때문에 .hide()를 애니메이션처럼 동작시켜 지속 시간을 지정하는 것입니다.

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

짧은 지속시간을 주기 때문에 일반 .hide 함수와 마찬가지로 즉각적인 것으로 표시됩니다.

$.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");

eval 함수(및 관련 함수, Function, setTimeout 및 setInterval)는 JavaScript 컴파일러에 대한 액세스를 제공합니다.이는 때때로 필요하지만 대부분의 경우 매우 잘못된 코딩이 있음을 나타냅니다.평가 기능은 JavaScript에서 가장 잘못 사용된 기능입니다.

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

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

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

<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>

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

$('#selector').delay(5000).fadeOut('slow');

언급URL : https://stackoverflow.com/questions/820951/hide-div-after-a-few-seconds