jquery-ui/demos/effect/animate.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Animate demo</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../ui/effect.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
		.toggler { width: 500px; height: 200px; position: relative; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
	</style>
	<script>
	$(function() {
		var state = true;
		$( "#button" ).click(function() {
			if ( state ) {
				$( "#effect" ).animate({
					backgroundColor: "#aa0000",
					color: "#fff",
					width: 500
				}, 1000 );
			} else {
				$( "#effect" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					width: 240
				}, 1000 );
			}
			state = !state;
		});
	});
	</script>
</head>
<body>

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Animate</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>

<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`<html lang="en">`
			`<head>`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`<meta charset="utf-8">`
Demos: Cleanup. 2010-09-10 02:33:09 +00:00			`<title>jQuery UI Effects - Animate demo</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Build: Reorganize external directory Put each external library into its own directory. Move jquery.js to external. Ref gh-1266 2014-06-10 11:55:45 +00:00			`<script src="../../external/jquery/jquery.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/effect.js"></script>`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<style>`
			`.toggler { width: 500px; height: 200px; position: relative; }`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`#button { padding: .5em 1em; text-decoration: none; }`
Effects: Rewrite 1. Introduces a set of helper methods to easily create and define new effects. 2. Uses clip animations and placeholders instead of wrappers for clip effects. 3. Ensures all animations are detectable as animated Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041 Closes gh-1017 2012-12-26 13:35:42 +00:00			`#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }`
updated demos to a standard format - class animations do not seem to work in safari (unsure why) 2009-02-27 18:05:18 +00:00			`#effect h3 { margin: 0; padding: 0.4em; text-align: center; }`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`</style>`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`<script>`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`$(function() {`
Animate demo: Don't use .toggle(fn). 2012-05-21 14:06:46 +00:00			`var state = true;`
			`$( "#button" ).click(function() {`
			`if ( state ) {`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`$( "#effect" ).animate({`
			`backgroundColor: "#aa0000",`
			`color: "#fff",`
			`width: 500`
			`}, 1000 );`
Animate demo: Don't use .toggle(fn). 2012-05-21 14:06:46 +00:00			`} else {`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`$( "#effect" ).animate({`
			`backgroundColor: "#fff",`
			`color: "#000",`
			`width: 240`
			`}, 1000 );`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`}`
Animate demo: Don't use .toggle(fn). 2012-05-21 14:06:46 +00:00			`state = !state;`
			`});`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

			`<div class="toggler">`
updated demos to a standard format - class animations do not seem to work in safari (unsure why) 2009-02-27 18:05:18 +00:00			`<div id="effect" class="ui-widget-content ui-corner-all">`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`<h3 class="ui-widget-header ui-corner-all">Animate</h3>`
			`<p>`
			`Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.`
			`</p>`
			`</div>`
			`</div>`

Button demo: Replace anchors with more appropriate buttons 2014-04-24 17:39:08 +00:00			`<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>`
added effect method folders / pages 2009-02-26 22:50:45 +00:00
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`<div class="demo-description">`
			`<p>Click the button above to preview the effect.</p>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
added effect method folders / pages 2009-02-26 22:50:45 +00:00			`</body>`
			`</html>`