Ticket #4476: test.html

File test.html, 1.4 KB (added by defenestrator, April 16, 2009 08:33AM UTC)
<!doctype html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animation Stress Test</title>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script>
<script type="text/javascript"><!--
$(function() {
	function prepare(class, num) {
		$("#x").attr("class", class);
		for (; num > 0; num--) $("#x").append($("<div></div>"));
		$("#prepare1").css("display", "none");
		$("#prepare2").css("display", "none");
		$("#go").css("display", "inline");
	}
	$("#prepare1").click(function() { prepare("a", 10000); });
	$("#prepare2").click(function() { prepare("b", 2500); });
	$("#go").click(function() {
		$("#x div").stop().css("backgroundColor", "white").animate({ backgroundColor: "black" }, 2000);
	});
})
--></script>
<style type="text/css">
#go { display: none; }
#x { width: 501px; height: 501px; border: 1px solid black; padding: 1px; }
.a div { width: 4px; height: 4px; float: left; margin: 1px 0 0 1px; background-color: #888; }
.b div { width: 7px; height: 7px; border: 1px solid #ccc; float: left; margin: 1px 0 0 1px; }
</style>

<button id="prepare1">Create 10,000 divs</button>
<button id="prepare2">Create 2,500 divs</button>
<button id="go">Animate</button>
<div id="x"></div>

Download in other formats:

Original Format