ซ่อน div หลังจากผ่านไปสองสามวินาที

ฉันสงสัยว่าใน jquery ฉันจะซ่อน div ได้อย่างไรภายในไม่กี่วินาที เช่นเดียวกับข้อความของ Gmail

ฉันพยายามเต็มที่แล้ว แต่ก็ไม่สามารถใช้งานได้

ซึ่งจะซ่อน div หลังจากผ่านไป 1 วินาที (1,000 มิลลิวินาที)

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 () ดังนั้นมันจึงสามารถเคลื่อนไหวได้ แต่คุณสามารถใช้. ซ่อน () ได้เช่นกัน

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

jquery นำเสนอวิธีการต่างๆในการซ่อน div ในลักษณะตามกำหนดเวลาที่ไม่จำเป็นต้องตั้งค่าและในภายหลังการล้างหรือรีเซ็ตตัวจับเวลาช่วงเวลาหรือตัวจัดการเหตุการณ์อื่น ๆ นี่คือตัวอย่างบางส่วน

ซ่อนบริสุทธิ์หน่วงเวลาหนึ่งวินาที

// 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/

มีวิธีง่ายๆในการทำเช่นนี้

ปัญหาคือ. ดีเลย์เฉพาะเอฟเฟกต์แอนิเมชันดังนั้นสิ่งที่คุณต้องทำคือทำให้. hide () ทำหน้าที่เหมือนแอนิเมชั่นโดยกำหนดระยะเวลาไว้

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

ด้วยการให้ช่วงเวลาสั้น ๆ ที่ดีดูเหมือนว่าจะเป็นแบบทันทีเช่นเดียวกับฟังก์ชัน. hidden ทั่วไป

$.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 (และญาติของฟังก์ชัน 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>