Current File : /home/tradevaly/www/node_modules/jquery.easing/example/demo.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Demo of all easing styles</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.js"></script>
  <script type="text/javascript" src="../jquery.easing.js"></script>

  <style type="text/css" media="screen">
  #bounds {
	width: 250px;
	height: 250px;
	border: 1px solid #888;
  }
  #box {
	height: 50px;
	width: 50px;
	background: black;
  }
  </style>

  <script type="text/javascript">
    $(function() {
		var easings = $.map( $.easing, function( fn, key ) {
				return jQuery.isFunction( fn ) ?
					"<option value='" + key + "'>" + key + "</option>" :
					null;
			}),
			current = 0,
			positions = [
				{
					marginTop: "0px",
					marginLeft: "0px"
				}, {
					marginTop: "200px",
					marginLeft: "200px"
				}
			];
		
		$( "#easing" ).html( easings );
		$( "#run" ).on( "click", function() {
			var duration = +$( "#duration" ).val(),
				easing = $( "#easing" ).val(),
				start = Date.now();

			if ( Number.isNaN( duration ) ) {
				duration = 1000;
				$( "#duration" ).val( duration );
			}

			$( "#status" ).text( "Animating..." );
			
			// Alternate positions
			current = current ^ 1;
			$( "#box" ).animate( positions[current], duration, easing,
				function() {
					$( "#status" ).text( "Done (" + (Date.now() - start)/1000	 + " seconds)" );
				}
			);
		});
    });
  </script>
</head>
<body>
<h1>Demo of all easing styles</h1>
<p id=status>Choose an easing method and press Run</p>
<p>
	<label for=easing>Easing: </label>
	<select id=easing></select><br />
	<label for=duration> Duration (seconds): </label>
	<input type=text id=duration size=10 value=1000 /><br />
	<button id=run>Run</button>
</p>
<div id=bounds>
  <div id="box"></div>
</div>

</body>
</html>