mirror of
https://github.com/gdsmith/jquery.easing.git
synced 2025-12-17 12:00:08 +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
57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Example</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>
|
|
<script src="../jquery.easing.compatibility.js"></script>
|
|
<script>
|
|
/* globals $ */
|
|
$(function() {
|
|
var boing = function() {
|
|
$('#boxing')
|
|
.animate({marginLeft: '50px' }, 1000, 'easeOutElastic')
|
|
.animate({marginTop: '50px' }, 1000, 'easeOutBounce')
|
|
.animate({marginLeft: '-150px'}, 1000, 'easeOutQuad')
|
|
.animate({marginTop: '-150px'}, 1000, 'easeInOutBack');
|
|
};
|
|
var squish = function() {
|
|
$('#box')
|
|
.animate({height: '100px', marginTop: '0px', width: '50px' }, 1000, 'easeOutElastic')
|
|
.animate({height: '50px' , marginTop: '25px', width: '50px' }, 1000, 'easeOutBounce')
|
|
.animate({height: '50px' , marginTop: '25px', width: '100px'}, 1000, 'easeOutQuad')
|
|
.animate({height:'100px' , marginTop: '0px', width: '100px'}, 1000, 'easeInOutBack');
|
|
};
|
|
setInterval(boing, 4000);
|
|
setInterval(squish, 4000);
|
|
setTimeout(function() {
|
|
boing();
|
|
squish();
|
|
}, 500);
|
|
});
|
|
</script>
|
|
<style media="screen">
|
|
#boxing {
|
|
height:100px;
|
|
width:100px;
|
|
position:absolute;
|
|
top:50%;left:50%;
|
|
margin-left:-150px;
|
|
margin-top:-150px;
|
|
}
|
|
#box {
|
|
height:100px;
|
|
width:100px;
|
|
background:#000;
|
|
margin:0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="boxing"><div id="box"></div></div>
|
|
</body>
|
|
</html>
|