[jQuery - 기능 - (10) ] $.fadeIn() : 선택한 id값 서서히 나오게 하기
예제1 : https://www.w3schools.com/code/tryit.asp?filename=GAV63689QWN1(서서히 나타나기)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
h1.fi {
display: none;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'h1.fi' ).fadeIn( 2000 );
} );
</script>
</head>
<body>
<h1 class="fi">Lorem ipsum dolor.</h1>
</body>
</html>
|
숫자는 1000 = 1초이다.
예제2 : https://www.w3schools.com/code/tryit.asp?filename=GAV63LTMW60A(서서히 나타난 후 색 변경)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
h1.fi {
display: none;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'h1.fi' ).fadeIn( 2000, function() {
$( this ).css( 'color', 'red' );
} );
} );
</script>
</head>
<body>
<h1 class="fi">Lorem ipsum dolor.</h1>
</body>
</html>
|
'◽ HTML & CSS & JS, jQuery' 카테고리의 다른 글
| [JavaScript - (17) ] 1. return true 2. return false 3. return (null) 차이점 (0) | 2020.01.16 |
|---|---|
| [jQuery - 기능 - (11) ] jQuery.makeArray() (0) | 2020.01.15 |
| [jQuery - 기본 - (3)] "$"의 의미는 무엇인가. (0) | 2020.01.15 |
| [HTML & CSS] <area> 태그의 coords 속성 : 이미지에 영역 링크 넣기 (0) | 2020.01.09 |
| [HTML & CSS] <img> alt 속성 (0) | 2020.01.02 |
| [JavaScript - (16) ] CDN(Content delivery network 또는 content distribution network)이란? - 수정1 (0) | 2019.12.01 |
| [HTML] HTML5, CSS3 무엇이 바뀌었나 (0) | 2019.11.25 |