jQuery แสดงเป็นเวลา 5 วินาทีจากนั้นซ่อน

145

ฉันใช้.showเพื่อแสดงข้อความที่ซ่อนอยู่หลังจากส่งแบบฟอร์มที่ประสบความสำเร็จ

จะแสดงข้อความเป็นเวลา 5 วินาทีแล้วซ่อนได้อย่างไร

351

คุณสามารถใช้.delay()ก่อนภาพเคลื่อนไหวเช่นนี้:

$("#myElem").show().delay(5000).fadeOut();

หากไม่ใช่ภาพเคลื่อนไหวให้ใช้setTimeout()โดยตรงเช่นนี้:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

คุณทำสิ่งที่สองเพราะ.hide()ปกติจะไม่อยู่ในfxคิวภาพเคลื่อนไหว ( ) โดยไม่มีระยะเวลามันเป็นเพียงเอฟเฟกต์ทันที

หรือตัวเลือกอื่นคือการใช้.delay()และ.queue()ตัวคุณเองเช่นนี้:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

— Nick Craver
แหล่งที่มา

1

คำแนะนำ 2 ทำงานอย่างสมบูรณ์แบบด้วยการแสดงไอคอนเครื่องหมายถูกและใช้ fadeOut () แทนที่จะซ่อน () คำตอบที่ดี

— Kevin Zych

2

@wilsjd ไม่ทำไม่ได้.delay()จะไม่ทำงานกับ.hide()องค์ประกอบที่จะถูกแสดงแล้วซ่อนทันที ดูjsFiddle นี้นี่คือเหตุผลที่นิคกล่าวว่า "ถ้ามันไม่ได้เป็นภาพเคลื่อนไหวที่ใช้ setTimeout () โดยตรงเช่นนี้ ...."

— เวสลีย์สมิ ธ

อืมฉันสงสัยว่ามันเคยทำงานเมื่อสองปีก่อนหรือเปล่า พบว่าดี ขอบคุณที่ทำให้ฉันซื่อสัตย์

— wilsjd

ฉันใช้งานสิ่งนี้ด้วยเช่นกัน แต่เมื่อฉันแสดงข้อความ msg สองครั้งภายใน 5 วินาทีมันควรซ่อน prev และ re-show ในขณะที่มันไม่รีเซ็ตการหน่วงเวลาแรก

— alamnaryab

18

คุณสามารถใช้เอฟเฟกต์ด้านล่างเพื่อเคลื่อนไหวคุณสามารถเปลี่ยนค่าได้ตามความต้องการของคุณ

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');

— ราหุล
แหล่งที่มา

1

$ (... ). fadeIn (... ). animate (... ). effect ไม่ใช่ฟังก์ชั่นใน JQuery 2.1.3

— Dustin Charles

@DustinCharles เพิ่ม jQueryUI ไม่ใช่แค่ jQuery jQuery ไม่มีฟังก์ชั่น effect () เช่นcode.jquery.com/ui/1.12.0/jquery-ui.min.js

— ราหุล

0

เรียบง่ายอย่างนี้:

$("#myElem").show("slow").delay(5000).hide("slow");

— อันโตนิโอโออิ
แหล่งที่มา