mirror of
https://github.com/gdsmith/jquery.easing.git
synced 2025-12-22 12:13:57 +01:00
e57b1fc7d1
- Enhancement (demo): Switch to local jquery; closes #29 - License: Rename file to reflect license type and add file extension - Linting (ESLint): Add linting config and script; enforce recommended rules and indent/semicolon - Linting (HTML): Use tabs for indent (as with JavaScript); remove redundant type=text/css, type=text/javascript attributes; quote attributes for HTML validator; suppress favicon requests - Maintenance: Add `.editorconfig` to proactively enforce indent by IDEs - npm: Add recommended `package-lock.json` - npm: Add recommended `package.json` properties - npm: Add static server (and open-cli) for testing and opening example
83 lines
1.8 KiB
HTML
83 lines
1.8 KiB
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>
|
|
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
|
|
<script src="../node_modules/jquery/dist/jquery.js"></script>
|
|
<script src="../jquery.easing.js"></script>
|
|
|
|
<style media="screen">
|
|
#bounds {
|
|
width: 250px;
|
|
height: 250px;
|
|
border: 1px solid #888;
|
|
}
|
|
#box {
|
|
height: 50px;
|
|
width: 50px;
|
|
background: black;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
/* globals $ */
|
|
$(function() {
|
|
var easings = $.map( $.easing, function( fn, key ) {
|
|
return $.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>
|