일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- HTML
- 1일 1패턴
- 청첩장
- 설날
- javascript
- 출산휴가
- 영어 회화
- 용산아이파크몰
- 자바스크립트 스타일 가이드
- effect
- css
- 산책
- 달리기
- 스타일 가이드
- animation
- 예비맘
- 신혼
- 결혼준비
- 1일 1영어회화
- 결혼
- 영어회화
- 1일 1단어
- 영어공부
- 가을
- 초코맘
- 1일 1독서
- 재택근무
- 업무
- event
- 신혼생활
- Today
- Total
코딩물고기
[J] JavaScript & jQuery 공부하기 #30 본문
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.
35. slide와 fade
* slide() 메소드
- slideUp() : 요소 영역을 위로 올림
- slideDown() : 요소 영역을 아래로 내림
< script type="text/javascript">
$("요소").slideUp();
$("요소").slideDown();
</ script>
* fade() 메소드
- fadeIn() : 요소 영역이 나타나게 함
- fadeOut() : 요소 영역이 사라지게 함
< script type="text/javascript">
$("요소").fadeIn();
$("요소").fadeOut();
</ script>
* slideUp()과 slideDown()메소드 이용 효과
- 이벤트를 발생시킬 버튼과 슬라이드 될 문장을 정의
< body>
< button id = "slide_up">위로</ button>
< button id = "slide_down">아래로</ button>
< p>안녕!</ p>
</ body>
- 문장이 올라가고 내려가는 코드 블록을 정의한다
< script type="text/javascript">
$(document).ready(function(){
$("#slide_up").click(function(){
$("p").slideUp();
});
$("#slide_down").click(function(){
$("p").slideDown();
});
});
</ script>
* fadeIn()과 fadeOut()메소드 이용 효과
- 이벤트를 발생시킬 버튼과 사라지고 나타날 문장을 정의한다
< body>
< button id ="fade_out">사라지기</ button>
< button id ="fade_in">나타나기</ button>
< p>방가워</ p>
</ body>
- 문장이 사라지고, 나타나는 실행문을 정의함
< script type="text/javascript">
$(document).ready(function(){
$("#fade_out").click(function(){
$("p").fadeOut();
});
$("#fade_in").click(function(){
$("p").fadeIn();
});
});
</ script>
'코딩물고기의 IT월드' 카테고리의 다른 글
[J] JavaScript & jQuery 공부하기 #32 (0) | 2019.04.09 |
---|---|
[J] JavaScript & jQuery 공부하기 #31 (0) | 2019.04.09 |
[J] JavaScript & jQuery 공부하기 #29 (0) | 2019.04.09 |
[J] JavaScript & jQuery 공부하기 #28 (0) | 2019.04.09 |
[J] JavaScript & jQuery 공부하기 #27 (0) | 2019.04.08 |