효과 메서드
요소를 숨겼다 보이도록 해주는 메서드
$(요소 선택).효과 메서드(효과 소요시간, 가속도, 콜백함수)
애니메이션 메서드
선택한 요소에 동작을 적용시킴
$(요소 선택).animate({애니메이션에 적욜할 속성과 값}, 가속도, 콜백함수)
효과
ex)
<body>
<p class="btnwrap">
<button class="btn1">숨김</button>
</p>
<div class="wrap">
<p class="txt1">내용1</p>
<p class="txt1">내용2</p>
</div>
</body>
$(function() {
$(".btn1").on("click", function() {
$(".wrap").css({display:"none"}); // 숨김버튼 클릭시 사라짐
});
});
$(function() {
$(".btn1").on("click", function() {
$(".wrap").slideUp(1000, function() {
alert("숨김 완료");
}); // 1000m/s=1초
});
});
$(function() {
$(".btn1").on("click", function() {
$(".wrap").slideUp(1000, function() {
$(".btn1").text("노출"); // 숨김버튼 클릭 후, 내용이 모두 숨겨지면 노출버튼으로 바뀜
}); // 1000m/s=1초
});
});
// 숨김버튼 클릭시 내용이 숨겨지고 노출로바뀌며, 노출버튼 클릭시 내용이 드러나며 숨김으로 바뀌고
$(function() {
$(".btn1").on("click", function() {
var ts = $(this);
if(ts.text() == "숨김") {
$(".wrap").slideUp(1000, function() {
$(".btn1").text("노출");
} else {
$(".wrap").slideDown(1000, function() {
$(".btn1").text("숨김");
});
}
});
});
애니메이션
'Frontend > jQuery' 카테고리의 다른 글
| 제이쿼리 플러그인 (0) | 2022.10.31 |
|---|---|
| 제이쿼리 비동기 방식 (0) | 2022.10.31 |
| 이벤트 (0) | 2022.10.31 |
| 제이쿼리 기본 다지기 (0) | 2022.10.30 |
| jquery 콜백 함수 (0) | 2022.03.29 |
댓글