RobinNixon
38 lines
879 B
HTML
38 lines
879 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Effects: Animation</title>
|
|
<script src='jquery-3.5.1.min.js'></script>
|
|
<style>
|
|
#ball {
|
|
position :relative;
|
|
}
|
|
#box {
|
|
width :640px;
|
|
height :480px;
|
|
background:green;
|
|
border :1px solid #444;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='box'>
|
|
<img id='ball' src='ball.png'>
|
|
</div>
|
|
<script>
|
|
bounce()
|
|
|
|
function bounce()
|
|
{
|
|
$('#ball')
|
|
.animate( { left:'270px', top :'380px' }, 'slow', 'linear')
|
|
.animate( { left:'540px', top :'190px' }, 'slow', 'linear')
|
|
.animate( { left:'270px', top :'0px' }, 'slow', 'linear')
|
|
.animate( { left:'0px', top :'190px' }, 'slow', 'linear', bounce)
|
|
}
|
|
|
|
$('#ball').click(function() { $(this).finish() })
|
|
</script>
|
|
</body>
|
|
</html>
|