javascript - ซ่อน div หลังจากไม่กี่วินาที

ฉันสงสัยว่า ใน jQuery ฉันสามารถซ่อน div หลังจากผ่านไปไม่กี่วินาทีได้อย่างไร? เช่น ข้อความใน Gmail เป็นตัวอย่าง

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

คำตอบ #1

สิ่งนี้จะซ่อน div หลังจาก 1 วินาที (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()

คำตอบ #2

คุณสามารถลองใช้ .delay()

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

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

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

คำตอบ #3

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/

คำตอบ #4

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

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

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

โดยการกำหนดระยะเวลาสั้น ๆ ให้กับมัน มันจะดูเหมือนเป็นทันทีเหมือนกับฟังก์ชัน .hide ปกติ