반응형
목차
글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다.
(https://scribblinganything.tistory.com/298)
jquery - slide 효과로 화면이 나오거나 사라지게 하기 : 정의
jquery slide 관련 함수는 슬라이드처럼 화면이 내려오거나 올라가면서 나오거나 사라지게 만들 수 있다. 관련 함수는 아래와 같다.
- $(selector).slideDown(speed,callback);
- $(selector).slideUp(speed,callback);
- $(selector).slideToggle(speed,callback);
slideDown 은 말 그대로 글이 슬라이방식으로 아래로 나오게 만든다.
slideUp은 글이 슬라이드 방식으로 위로 사라지게 만든다.
slideToggle은 클릭할 때마다 나오거나 사라지게 만든다.
jquery - slide 효과로 화면이 나오거나 사라지게 하기 : 예제
코드>>
<!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").slideToggle();
});
});
</script>
<style>
.button1 {background-color: #008CBA; padding:3px; text-align: center;} /* Blue */
</style>
</head>
<body>
<p id = "ex1">버튼을 누르면 슬라이드 효과로 화면이 내려옵니다.</p>
<button id="button">버튼</button><br>
<div class="button1" id="blue">까꿍</div>
</body>
</html>
결과>>
주석>>
결과처럼 버튼 클릭시 까꿍화면이 나왔다가 사라진다.
반응형
'웹관련프로그래밍(web programming) > Javascript 자바스크립트' 카테고리의 다른 글
| [Javascript] HTML문서에 시간 입력하거나 글쓰기 (document.write) (0) | 2021.10.17 |
|---|---|
| [Javascript] jquery animate() 애니매이션 기능 (0) | 2021.09.29 |
| [Javascript] jquery fade 기능, 천천히 사라지거나 나타내게 하기 (0) | 2021.09.27 |
| [Javascript] jquery 버튼 클릭 해서 글자 지우고 나타나게 하기 (0) | 2021.09.26 |
| bootstrap, container-fluid,container 클래스 비교 (0) | 2020.12.24 |