이펙트효과
기본설정으로 바로 사용할수있다
effect
요소의 표시와 숨김
.hide() 이벤트시 숨긴다
.show() 이벤트시 보이게한다
.toggle() 이벤트시 숨기고 보이게 할수있다
인수로 밀리초 해당숫자나 "slow" , "fast" 전달하여 이펙트효과 속도조절가능
ex) .show(4000) .toggle("slow") show("fast")
jQuery
head안에 넣어야한다
<script src="https://code.jquery.com/jquery3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<button id="show_button">보이기</button>
<button id="hide_button">숨기기</button>
<p id="text" style="display: none;">글자가 보이고 숨겨집니다</p> <br><br>
<button id="toggle_button">토글</button>
<div><p id="p">이 요소는 div안의 p요소입니다</p>div입니다</div>
<script>
//show 클릭시 텍스트를 보이게한다
$("#show_button").on("click",function () {
$("#text").show();
// show(4000);클릭하면 4초후 보임 .show(slow);느리게 .show("fast")빠르게
});
//hide 클릭시 텍스트를 숨긴다
$("#hide_button").on("click",function () {
$("#text").hide();
});
//toggle 클릭시 보이고 또 클릭시 숨긴다
$("#toggle_button").on("click",function () {
$("div, #p").toggle();
//.toggle(4000); 4초후 나왔다 또 클릭시 안나오게 toggle("fast")
})
$("div, #p").hide(); // div나 p태그를 숨겨준다
</script>
'JQuery' 카테고리의 다른 글
| 이펙트효과제어 .delay() .stop() .finish() (0) | 2022.03.11 |
|---|---|
| 슬라이드효과 (slide) .slideUp() .slideDown() .slide Toggle (0) | 2022.03.11 |
| 페이드효과 (fade) .fadeIn() .fadeOut() .fadeToggle() (0) | 2022.03.11 |
| JQuery on() one() off() (0) | 2022.03.10 |
| jQuery (0) | 2022.03.08 |