IT Study/Web

[JQuery] fadein, fadeout, toggle 기본 예제

도뿌리 2018. 8. 6. 15:40

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="./jquery/jquery.min.js"></script>
 
</head>
<body>
 
<div id="div1" style="width: 80px; height: 80px;background-color: red;">
 
</div>
<div id="div2" style="width: 80px; height: 80px;background-color: green;">
 
</div>
<div id="div3" style="width: 80px; height: 80px;background-color: blue;">
 
</div>
<br><br><br>
 
<img alt="None" src="nature.jpg" class="pic">
<br><br><br>
 
<button id="fadein">fade in</button>
<button id="fadeout">fade out</button>
<button id="toggle">toggle</button>
 
<script type="text/javascript">
 
$(function () {
    var speed = 3000;
    $("#fadein").click(function () {
        $("#div1").fadeIn(speed);
        $("#div2").fadeIn(speed);
        $("#div3").fadeIn(speed);
    });
    $("#fadeout").click(function () {
        $("#div1").fadeOut(speed);
        $("#div2").fadeOut(speed);
        $("#div3").fadeOut(speed);
    });
    $("#toggle").click(function () {
        $("#div1").fadeToggle(speed);
        $("#div2").fadeToggle(speed);
        $("#div3").fadeToggle(speed);
        
    });
    
    $(".pic").click(setBorder);
/*     $(".pic").click(function () {
        $(".pic").css("border","20px solid blue");
    });
     */
    
});
 
 
 
function setBorder() {
    $(this).css("border","20px solid blue");
}
</script>
 
 
</body>
</html>
cs


저작자표시 비영리 동일조건