jquery-ui/demos/effect/animate.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Effects - Animate demo</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<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 src="../../external/requirejs/require.js"></script>
	<script src="../bootstrap.js">
		var state = true;
		$( "#button" ).on( "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: Add device-width viewport meta to all demos Ref 343c2651729af2fdf020dd538fce0855785f5a0d 2015-09-30 13:11:22 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
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">`
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: Update demos to use AMD Ref #10119 2015-06-30 22:57:51 +00:00			`<script src="../../external/requirejs/require.js"></script>`
			`<script src="../bootstrap.js">`
Animate demo: Don't use .toggle(fn). 2012-05-21 14:06:46 +00:00			`var state = true;`
Effects: Remove core event/alias and deprecated module dependencies 2015-05-14 02:02:48 +00:00			`$( "#button" ).on( "click", function() {`
Animate demo: Don't use .toggle(fn). 2012-05-21 14:06:46 +00:00			`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>`