JQueryPractice/demo2.html at main · EduKeyPath/JQueryPractice · GitHub

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<title>Jquery Practice</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style>
.btn{background: #ececec; color: #000; padding: 5px 8px 6px 8px; text-decoration: none; border: solid 1px #ccc;display: inline-block; margin:3px 0; font-size: 11px;}
nav { background-color:#ccc; position:fixed; top:0; width:100%; left:0; padding:3px;}
.box {width:50px; height:50px; background:red;}
</style>
</head>
<body>
<nav class="menu">
    <a class="btn" style="float:right;" href="javascript:void(0);" onClick="window.location.reload()">Reload</a>

    <a class="btn" href="javascript:void(0);" id="animate">Animate</a>
    <a class="btn" href="javascript:void(0);" id="delay">Delay</a>
    <a class="btn" href="javascript:void(0);" id="fadeIn">Fade In</a>
    <a class="btn" href="javascript:void(0);" id="fadeOut">Fade Out</a>
    <a class="btn" href="javascript:void(0);" id="fadeTo">Fade To</a>
    <a class="btn" href="javascript:void(0);" id="fadeToggle">Fade Toggle</a>
    <a class="btn" href="javascript:void(0);" id="finish">Finish</a>
    <a class="btn" href="javascript:void(0);" id="hide">Hide</a>
    <a class="btn" href="javascript:void(0);" id="show">Show</a>
    <a class="btn" href="javascript:void(0);" id="slideDown">Slide Down</a>
    <a class="btn" href="javascript:void(0);" id="slideUp">Slide Up</a>
    <a class="btn" href="javascript:void(0);" id="slideToggle">Slide Toggle</a>
    <a class="btn" href="javascript:void(0);" id="stop">Stop</a>
    <a class="btn" href="javascript:void(0);" id="toggle">Toggle</a>
    <a class="btn" href="javascript:void(0);" id="callBack">Call Back</a>
    <a class="btn" href="javascript:void(0);" id="chaining">Chaining</a>
    <a class="btn" href="javascript:void(0);" id="queue">Queue</a>
    <a class="btn" href="javascript:void(0);" id="dequeue">Dequeue</a>
    <a class="btn" href="javascript:void(0);" id="clearQueue">Clear Queue</a>
</nav>

<br/><br/>
<section>
	<div class="box"></div>
    <span></span>

</section>

<br/><br/><br/>
<br/><br/><br/>

<script>
$(document).ready(function(){
	$('#animate').click(function(){
		$('.box').animate({
			'width' : '500px',
			'left' : '50px',
			'height' : '200px'
		}), '5000'
	});
	$('#delay').click(function(){
		$('.box').animate({'width' : '50px', 'left' : '50px', 'height' : '100px'});
		$('.box').animate({'width' : '100px', 'left' : '60px', 'height' : '150px'});
		$('.box').delay('500').animate({'width' : '200px', 'left' : '80px', 'height' : '250px'});
	});
	$('#fadeOut').click(function(){
		$('.box').fadeOut('slow')
	});
	$('#fadeIn').click(function(){
		$('.box').fadeIn('slow')
	});
	$('#fadeTo').click(function(){
		$('.box').fadeTo('slow', 0.5)
	});
	$('#fadeToggle').click(function(){
		$('.box').fadeToggle('slow')
	});
	$('#finish').click(function(){
		$('.box').finish()
	});
	$('#hide').click(function(){
		$('.box').hide('slow');
	});
	$('#show').click(function(){
		$('.box').show('slow');
	});
	$('#slideDown').click(function(){
		$('.box').slideDown('slow')
	});
	$('#slideUp').click(function(){
		$('.box').slideUp('slow')
	});
	$('#slideToggle').click(function(){
		$('.box').slideToggle('slow')
	})
	$('#stop').click(function(){
		$('.box').stop()
	});
	$('#toggle').click(function(){
		$('.box').toggle('slow');
	});
	$('#callBack').click(function(){
		$('.box').hide('slow', function(){
			$('.box').show('3000');
		})
	});
	$('#chaining').click(function(){
		$('.box').slideUp('slow',function(){
			$('.box').slideDown('slow')
		}).css('background-color','green');
	});
	$('#queue').click(function(){
		var div = $('.box');
		div.animate({})
		div.animate({'width' : '50px', 'left' : '50px', 'height' : '100px'});
		div.animate({'width' : '100px', 'left' : '60px', 'height' : '150px'});
		div.animate({'width' : '200px', 'left' : '80px', 'height' : '250px'});
		div.animate({'width' : '100px', 'left' : '60px', 'height' : '150px'});
		div.animate({'width' : '50px', 'left' : '50px', 'height' : '100px'});
		$('span').text(div.queue().length)
	});
	$('#dequeue').click(function(){
		var div = $('.box');
		div.animate({'width' : '50px', 'left' : '50px', 'height' : '100px'});
		div.animate({'width' : '100px', 'left' : '60px', 'height' : '150px'});
		div.animate({'width' : '200px', 'left' : '80px', 'height' : '250px'});
		div.queue(function(){
			$('.box').css('background-color','green');
			div.dequeue()
		});
		div.animate({'width' : '100px', 'left' : '60px', 'height' : '150px'});
		div.animate({'width' : '50px', 'left' : '50px', 'height' : '100px'});
	});
	$('#clearQueue').click(function(){
		$('.box').clearQueue()
	})


})
</script>
</body>
</html>