출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.

jQuery fadeIn() : 나타나는 효과

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
});
</script>
</head>
<body>
 
<p>Demonstrate fadeIn() with different parameters.</p>
 
<button>Click to fade in boxes</button><br><br>
 
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
 
</body>
</html>
cs


jQuery fadeOut() : 사라지는 효과

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
    });
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
cs

jQuery fadeToggle() : hide and show 효과를 준다(속도도 조절 가능)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different parameters.</p>
<button>Click to fade toggle boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
cs

jQuery fadeTo() : 속도와 투명도를 조절할 수 있다.

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeTo("slow", 0.15);
        $("#div2").fadeTo("slow", 0.4);
        $("#div3").fadeTo("slow", 0.7);
    });
});
</script>
</head>
<body>
 
<p>Demonstrate fadeTo() with different parameters.</p>
 
<button>Click to fade boxes</button><br><br>
 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:gray;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:yellow;"></div>
 
</body>
</html>
 
cs


저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Effects 제이쿼리 효과 - Animate (1)  (0) 2017.08.11
jQuery Effects 제이쿼리 효과 - sliding  (0) 2017.08.10
jQuery Effects 제이쿼리 효과 - hide and show  (0) 2017.08.08
jQuery event 제이쿼리 이벤트 (2)  (0) 2017.08.07
jQuery event 제이쿼리 이벤트 (1)  (0) 2017.08.06

+ Recent posts

티스토리툴바