navarr · May 10, 2014 20:53
diff --git a/fadeTest.html b/fadeTest.html
 <!DOCTYPE html>
 <p class="a">This is the first paragraph of text.</p>
 <p class="b">This is the second paragraph of text.</p>
 <p class="c">This is the third paragraph of text.</p>
 <br /><hr /><br />
 Milliseconds before first fade: <input id="first" type="number" value="0" /><br />
 Milliseconds for Fade: <input id="fade" type="number" value="400" /><br />
 Milliseconds Between Fades: <input id="between" type="number" value="500" /><br />
 <label><input type="checkbox" id="wait" /> Wait for fade to finish before starting the next</label><br />
 <input type="button" id="doFade" value="Test Fade" />
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script>
 $(document).ready(function() {
 	$('#doFade').on('click', function(e) {
 		var first = parseInt($('#first').val(),10);
 		var fade = parseInt($('#fade').val(),10);
 		var btwn = parseInt($('#between').val(),10);
 		var wait = $('#wait').prop('checked');
 		var queue = ['.a','.b','.c'];
 		for (var i in queue) { $(queue[i]).fadeTo(0,0); }
 		var doFade = function(sel, fade, btwn, wait, callback) {
 			var doNext = function() {
 				setTimeout(callback, btwn);
 			};
 			if (wait) {
 				$(sel).fadeTo(fade, 1, doNext);
 			} else {
 				$(sel).fadeTo(fade, 1);
 				doNext();
 			}
 		};
 		setTimeout(function() {
 			doFade('.a', fade, btwn, wait, function() {
 				doFade('.b', fade, btwn, wait, function() {
 					doFade('.c', fade, btwn, wait, function() { });
 				});
 			});
 		}, first);
 	});
 });
 </script>
	<!DOCTYPE html>
	<p class="a">This is the first paragraph of text.</p>
	<p class="b">This is the second paragraph of text.</p>
	<p class="c">This is the third paragraph of text.</p>
	<br /><hr /><br />
	Milliseconds before first fade: <input id="first" type="number" value="0" /><br />
	Milliseconds for Fade: <input id="fade" type="number" value="400" /><br />
	Milliseconds Between Fades: <input id="between" type="number" value="500" /><br />
	<label><input type="checkbox" id="wait" /> Wait for fade to finish before starting the next</label><br />
	<input type="button" id="doFade" value="Test Fade" />
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script>
	$(document).ready(function() {
	$('#doFade').on('click', function(e) {
	var first = parseInt($('#first').val(),10);
	var fade = parseInt($('#fade').val(),10);
	var btwn = parseInt($('#between').val(),10);
	var wait = $('#wait').prop('checked');
	var queue = ['.a','.b','.c'];
	for (var i in queue) { $(queue[i]).fadeTo(0,0); }
	var doFade = function(sel, fade, btwn, wait, callback) {
	var doNext = function() {
	setTimeout(callback, btwn);
	};
	if (wait) {
	$(sel).fadeTo(fade, 1, doNext);
	} else {
	$(sel).fadeTo(fade, 1);
	doNext();
	}
	};
	setTimeout(function() {
	doFade('.a', fade, btwn, wait, function() {
	doFade('.b', fade, btwn, wait, function() {
	doFade('.c', fade, btwn, wait, function() { });
	});
	});
	}, first);
	});
	});
	</script>