jQuery autohide element หลังจาก 5 วินาที

เป็นไปได้ไหมที่จะซ่อนองค์ประกอบโดยอัตโนมัติในหน้าเว็บ 5 วินาทีหลังจากโหลดแบบฟอร์มโดยใช้ jQuery

โดยทั่วไปฉันมี

<div id="successMessage">Project saved successfully!</div>

ที่ฉันอยากจะหายไปหลังจากผ่านไป 5 วินาที ฉันได้ดู jQuery UI และเอฟเฟกต์การซ่อนแล้ว แต่ฉันมีปัญหาเล็กน้อยในการทำให้มันทำงานในแบบที่ฉันต้องการ

<script type="text/javascript">
        $(function() {
            function runEffect() {

                var selectedEffect = 'blind';

                var options = {};

                $("#successMessage").hide(selectedEffect, options, 500);
            };

            $("#successMessage").click(function() {
                runEffect();
                return false;
            });
        });
    </script>

ฉันต้องการลบฟังก์ชันการคลิกออกและเพิ่มวิธีการหมดเวลาที่เรียกใช้ runEffect () หลังจากผ่านไป 5 วินาที

$(function() {
    // setTimeout() function will be fired after page is loaded
    // it will wait for 5 sec. and then will fire
    // $("#successMessage").hide() function
    setTimeout(function() {
        $("#successMessage").hide('blind', {}, 500)
    }, 5000);
});

หมายเหตุ : เพื่อให้ฟังก์ชัน jQuery ของคุณทำงานภายใน setTimeout คุณควรห่อไว้ด้านใน

function() { ... }

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

คุณสามารถลอง :

setTimeout(function() {
  $('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds

หากคุณใช้สิ่งนี้ Div ของคุณจะถูกซ่อนหลังจาก 30 วินาทีฉันลองอันนี้ด้วยและมันก็ใช้ได้สำหรับฉัน

โปรดทราบว่าคุณอาจต้องแสดงข้อความ div อีกครั้งหลังจากที่มันหายไป ดังนั้นคุณจะต้องว่างเปล่าแล้วแสดงองค์ประกอบอีกครั้งในบางจุด

คุณสามารถทำได้โดยใช้รหัส 1 บรรทัด:

$('#element_id').empty().show().html(message).delay(3000).fadeOut(300);

หากคุณใช้ jQuery คุณไม่จำเป็นต้องใช้ setTimeout อย่างน้อยก็ไม่ต้องซ่อนองค์ประกอบอัตโนมัติ

คุณใช้ setTimeout กับฟังก์ชัน runEffect:

function runEffect() {
    setTimeout(function(){
        var selectedEffect = 'blind';
        var options = {};
        $("#successMessage").hide(selectedEffect, options, 500)
     }, 5000);
}

ฉันคิดว่าคุณสามารถทำอะไรบางอย่างเช่น ...

setTimeout(function(){
    $(".message-class").trigger("click");
}, 5000);

และทำเอฟเฟกต์เคลื่อนไหวของคุณในเหตุการณ์คลิก ...

$(".message-class").click(function() {
    //your event-code
});

ทักทาย,

jQuery (". success_mgs"). แสดง (); setTimeout (ฟังก์ชัน () {jQuery (". success_mgs") ซ่อน ();}, 5000);

นี่คือวิธีที่คุณสามารถตั้งค่าระยะหมดเวลาหลังจากที่คุณคลิก

$(".selectorOnWhichEventCapture").on('click', function() {
    setTimeout(function(){
        $(".selector").doWhateverYouWantToDo();
    }, 5000);
});

// 5000 = 5 วินาที = 5,000 มิลลิวินาที