반응형
목차
글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다.
(https://scribblinganything.tistory.com/298)
jquery - fade 기능, 천천히 사라지거나 나타내게 하기
fade 라는 의미 그대로 천천히 진행되는 것이다. jquery에서 제공하는 fade 기능은 아래와 같다.
- $(selector).fadeIn(speed,callback);
- $(selector).fadeOut(speed,callback);
- $(selector).fadeToggle(speed,callback);
- $(selector).fadeTo(speed,opacity,callback);
fadeIn은 천천히 나타나게 하고, fadeOut은 천천히 사라지게 하고, fadeToggle은 한번 클릭 시 사라지고 다시 클릭 시 나타나게한다. fadeTo는 특정 레벨까지 사라지게 한다 (opacity : 탁도)
speed는 사라지는 속도를 조절한다. ms 단위로 숫자를 넣어도 되고 "slow", "fast"로 속도 값을 조절 할 수 있다.
jquery - fade 기능, 천천히 사라지거나 나타내게 하기 : 예제
코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://scribblinganything.tistory.com/</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#blue").fadeIn();
$("#red").fadeIn(1000);
$("#yellow").fadeIn("slow");
});
});
</script>
<style>
.button1 {background-color: #008CBA; display: none;} /* Blue */
.button2 {background-color: #f44336; display: none;} /* Red */
.button3 {background-color: #ffee07; display: none;} /* yellow */
</style>
</head>
<body>
<p id = "ex1">버튼을 누르면 새로운 버튼이 만들어 집니다.</p>
<button id="button">버튼</button>
<button class="button1" id="blue">blue</button>
<button class="button2" id="red">red</button>
<button class="button3" id="yellow">yellow</button>
</body>
</html>
결과>>
주석>>
버튼 클릭 후 순차적으로 버튼이 생겼다. 처음에 버튼이 안보이게 하는 것은 style에서 css의 버튼 값을 display 설정에서 안보이게 설정했기 때문이다.
반응형
'웹관련프로그래밍(web programming) > Javascript 자바스크립트' 카테고리의 다른 글
| [Javascript] jquery animate() 애니매이션 기능 (0) | 2021.09.29 |
|---|---|
| [Javascript] jquery slide 효과로 화면이 나오거나 사라지게 하기 (0) | 2021.09.28 |
| [Javascript] jquery 버튼 클릭 해서 글자 지우고 나타나게 하기 (0) | 2021.09.26 |
| bootstrap, container-fluid,container 클래스 비교 (0) | 2020.12.24 |
| javascript css html head에서 정의(선언) (0) | 2020.12.24 |