5 초 후 jQuery 자동 숨기기 요소

jQuery를 사용하여 양식이로드 된 후 5 초 후에 웹 페이지에서 요소를 자동으로 숨길 수 있습니까?

기본적으로 나는

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

클릭 함수를 제거하고 5 초 후에 runEffect ()를 호출하는 시간 제한 메서드를 추가하고 싶습니다.

$(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

이것을 사용하면 30 초 후에 div가 숨겨집니다. 나도 이것을 시도했고 저에게 효과적이었습니다.

div 텍스트가 사라진 후 다시 표시해야 할 수도 있습니다. 따라서 어느 시점에서 요소를 비운 다음 다시 표시해야합니다.

한 줄의 코드로이 작업을 수행 할 수 있습니다.

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

jQuery를 사용하는 경우 최소한 요소를 자동 숨기기 위해 setTimeout이 필요하지 않습니다.

runEffect 함수에서 setTimeout을 사용합니다.

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"). show (); setTimeout (function () {jQuery ( ". success_mgs"). hide ();}, 5000);

클릭 후 시간 제한을 설정하는 방법입니다.

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

// 5000 = 5 초 = 5000 밀리 초