[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>Effect - Hide And Show</h1>
<hr>
<button type="button" id="btn1">Hide And Show</button>
<button type="button" id="btn2">SlideUp And SlideDown</button>
<button type="button" id="btn3">FadeOut And FadeIn</button>
<hr>
<div id="displayDiv">
<img alt="코알라" src="images/Koala.jpg" width="500">
</div>
</body>
</html>
hide 메소드와 show 메소드
$(selector).show([duration]) : 선택자로 검색된 태그를 출력하는 메소드
$(selector).hide([duration]) : 선택자로 검색된 태그를 미출력하는 메소드
show메소드와 hide 메소드는 매개변수에 지속시간(ms)을 전달하면 설정된 시간동안 변화되는 효과를 제공한다.
$("#btn1").click(function() {
if($("#displayDiv").css("display")=="none") {//태그가 미배치(미출력)된 경우
$("#displayDiv").show(1000);
} else {//태그가 배치(출력)된 경우
$("#displayDiv").hide(1000);
}
});
위 코드를 toggle 메소드를 이용하여 더 간단하게 표현할 수 있다.
$(selector).toggle([duration])
: 선택자로 검색된 태그가 미출력된 경우 출력되도록 설정하고 출력된 경우 미출력되도록 설정하는 메소드
→ hide() 메소드와 show() 메소드를 반대로 호출한다.
$("#btn1").click(function() {
$("#displayDiv").toggle(1000);
});slideDown 메소드와 slideUp 메소드
$(selector).slideDown([duration]) : 선택자로 검색된 태그를 출력하는 메소드
$(selector).slideUp([duration]) : 선택자로 검색된 태그를 미출력하는 메소드
slidedown 메소드와 slideUp 메소드는 매개변수에 지속시간(ms)을 전달하면 설정된 시간동안 변화되는 효과를 제공한다.
$("#btn2").click(function() {
if($("#displayDiv").css("display")=="none") {//태그가 미배치(미출력)된 경우
$("#displayDiv").slideDown(1000);
} else {//태그가 배치(출력)된 경우
$("#displayDiv").slideUp(1000);
}
});
위 코드를 slideToggle 메소드를 이용하여 더 간단하게 표현할 수 있다.
$(selector).slideToggle([duration])
: 선택자로 검색된 태그가 미출력된 경우 출력되도록 설정하고 출력된 경우 미출력되도록 설정하는 메소드
→ slideUp() 메소드와 slideDown() 메소드를 반대로 호출하는 메소드이다.
$("#btn2").click(function() {
$("#displayDiv").slideToggle(1000);
});
fadeIn 메소드와 fadeOut 메소드
$(selector).fadeIn([duration]) : 선택자로 검색된 태그를 출력하는 메소드
$(selector).fadeOut([duration]) : 선택자로 검색된 태그를 미출력하는 메소드
fadeIn메소드와 fadeOut 메소드는 매개변수에 지속시간(ms)을 전달하면 설정된 시간동안 변화되는 효과를 제공한다.
$("#btn3").click(function() {
if($("#displayDiv").css("display")=="none") {//태그가 미배치(미출력)된 경우
$("#displayDiv").fadeIn(1000);
} else {//태그가 배치(출력)된 경우
$("#displayDiv").fadeOut(1000);
}
});
위 코드를 fadeToggle 메소드를 이용하여 더 간단하게 표현할 수 있다.
$(selector).fadeToggle([duration]) :
선택자로 검색된 태그가 미출력된 경우 출력되도록 설정하고 출력된 경우 미출력되도록 설정하는 메소드
→ fadeOut() 메소드와 fadeIn() 메소드를 반대로 호출하는 메소드
$("#btn3").click(function() {
$("#displayDiv").fadeToggle(1000);
});'학원 > 복기' 카테고리의 다른 글
| [Servlet] Servlet이란? (0) | 2023.06.14 |
|---|---|
| [jQuery] animate 효과 (0) | 2023.06.14 |
| [jQuery] checkbox 이벤트 (0) | 2023.06.14 |
| [jQuery] Form 이벤트 / Submit 이벤트 (0) | 2023.06.14 |
| [jQuery] 마우스(mouse) 이벤트 / 키(key) 이벤트 / 스크롤(scroll) 이벤트 (0) | 2023.06.14 |
