몇 초 후 div 숨기기

jquery에서 몇 초 후에 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 컴파일러에 대한 액세스를 제공합니다. 이것은 때때로 필요하지만 대부분의 경우 매우 나쁜 코딩이 있음을 나타냅니다. eval 함수는 JavaScript에서 가장 많이 사용되는 기능입니다.

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

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

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

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

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

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

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