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
'programing' 카테고리의 다른 글
| jQuery datepicker 년수 표시됨 (0) | 2023.11.05 |
|---|---|
| 소계외세 표시, 우커머스 체크아웃 시 소계외세를 별도의 행으로 추가 (0) | 2023.11.05 |
| x마일 반경 내의 다른 행에 대한 mySQL 경도 및 위도 쿼리 (0) | 2023.11.05 |
| 장고 1.7에서 초기 마이그레이션에서 다시 마이그레이션하는 방법은 무엇입니까? (0) | 2023.11.05 |
| 애플리케이션을 종료하고 홈 화면을 표시하는 방법? (0) | 2023.11.05 |