-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript_jquery.html
119 lines (119 loc) · 3.66 KB
/
javascript_jquery.html
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<body>
<button id="h1FadeToggleButton">h1 fade toggle</button>
<button id="multiFadeToggleButton">multi fade toggle</button>
<button id="childFadeToggleButton">child fade toggle</button>
<button id="oddEvenFadeToggleButton">odd even fade toggle click dblclick</button>
<h1 id="h1fade">h1</h1>
<h2 id="h2fade">h2</h1>
<h3 id="h3fade">h3</h1>
<div>
<p>
p inside div
</p>
</div>
<p>
p outside div
</p>
<ul>
<li>list 0</li>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
<p id="pMouseEnterLeave" style="background:whitesmoke">mouse enter leave</p>
<p id="pMouseHover" style="background:whitesmoke">mouse hover</p>
<button id="borderAllOnButton">border all on</button>
<button id="borderAllOffButton">border all off</button>
<br />
<br />
<button id="pToggle">p toggle</button>
<button id="pFadeToggle">p fade toggle</button>
<button id="pSlideToggle">p slide toggle</button>
<br />
<br />
<div id="aniDiv" style="background: black; width: 50px; position: absolute;">.</div>
<br />
<br />
<button id="aniButt">animate</button>
<button id="aniButtCallback">animate callback</button>
<button id="chainButt">chain</button>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// anon function
// code only works when document has fully loaded
$(document).ready(function() {
$("#h1fade").fadeToggle(500);
$("#h1fade").fadeToggle(500);
$("#h1FadeToggleButton").click(h1FadeToggleButton);
$("#multiFadeToggleButton").click(multiFadeToggleButton);
$("#childFadeToggleButton").click(childFadeToggleButton);
$("#oddEvenFadeToggleButton").click(evenFadeToggleButton);
$("#oddEvenFadeToggleButton").dblclick(oddFadeToggleButton);
$("#pMouseEnterLeave").mouseenter(pMouseEnter);
$("#pMouseEnterLeave").mouseleave(pMouseLeave);
$("#pMouseHover").hover(pMouseEnter, pMouseLeave);
$("#borderAllOnButton").click(borderAllOnButton);
$("#borderAllOffButton").click(borderAllOffButton);
$("#borderAllOffButton").click(borderAllOffButton);
$("#pToggle").click(pToggle);
$("#pFadeToggle").click(pFadeToggle);
$("#pSlideToggle").click(pSlideToggle);
$("#aniButt").click(aniFunct);
$("#aniButtCallback").click(aniCallbackFunct);
$("#chainButt").click(chainFunct);
function h1FadeToggleButton() {
$("#h1fade").fadeToggle(500);
$("#h1fade").fadeToggle(500);
}
function multiFadeToggleButton() {
$("h1, h2, h3").fadeToggle(500);
$("h1, h2, h3").fadeToggle(500);
}
function childFadeToggleButton() {
$("div > p").fadeToggle(500);
$("div > p").fadeToggle(500);
}
function evenFadeToggleButton() {
$("li:even").fadeToggle(500);
$("li:even").fadeToggle(500);
}
function oddFadeToggleButton() {
$("li:odd").fadeToggle(500);
$("li:odd").fadeToggle(500);
}
function pMouseEnter() {
$("#pMouseEnterLeave").fadeOut();
}
function pMouseLeave() {
$("#pMouseEnterLeave").fadeIn();
}
function borderAllOnButton() {
$("*").css("border", "2px solid black");
}
function borderAllOffButton() {
$("*").css("border", "0px");
}
function pToggle() {
$("p").toggle();
}
function pFadeToggle() {
$("p").fadeToggle(1500);
}
function pSlideToggle() {
$("p").slideToggle(1500);
}
function aniFunct() {
$("#aniDiv").animate({left: '50px', opacity: '0.5'}, 2000);
}
function aniCallbackFunct() {
$("#aniDiv").animate({left: '50px', opacity: '0.5'}, 5000, function() {alert("animate complete");});
}
function chainFunct() {
$("#aniDiv").slideUp(1500).slideDown(1500).fadeOut(1500).fadeIn(1500);
}
});
</script>
</html>