programing

jQuery 5초 후 자동 숨김 요소

sourcejob 2023. 11. 5. 11:33
반응형

jQuery 5초 후 자동 숨김 요소

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

기본적으로 저는

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

5초 후에 사라져버리고 싶다고 생각하고 있습니다.jQuery UI와 hide effect를 살펴보았지만 원하는 대로 작동하는 데 약간 어려움을 겪고 있습니다.

<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()를 호출하는 타임아웃 방식을 추가했으면 합니다.

$('#selector').delay(5000).fadeOut('slow');
$(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 기능을 set 안에서 작동시키기 위해서는 내부에 포장해야 합니다. 시간 제한은 내부에 포장을 해야 합니다.

function() { ... }

다음을 시도해 볼 수 있습니다.

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

이걸 썼다면 30초 후에 디브가 숨겨집니다.저도 이것을 시도해 보았는데 효과가 있었습니다.

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

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

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

jQuery를 사용하는 경우 setTimeout을 사용할 필요가 없으며 최소한 요소를 자동으로 숨기지 않아도 됩니다.

제 생각엔, 당신도 이런 걸 할 수 있을 것 같은데요...

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

이벤트 클릭에 애니메이션 효과를 적용할 수 있습니다.

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

인사말,

이펙트 함수를 실행할 때 setTimeout을 사용합니다.

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

jQuery(".success_mgs").show(); setTimeout(function(){ jQuery(.success_mgs").hide();},5000);

클릭 후 타임아웃을 설정할 수 있는 방법입니다.

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

//5000 = 5초 = 5000밀리섹

언급URL : https://stackoverflow.com/questions/683363/jquery-autohide-element-after-5-seconds

반응형