要求：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>实现页面元素加速动画效果</title> <style type="text/css"> .btn { border: 1px solid #fff; border-radius: 4px; background-color: #5cb85c; width: 60px; height: 30px; line-height: 30px; text-align: center; color: #fff; cursor: pointer; } .btn:hover { background-color: #449D44; } .ball { position: absolute; left: 10px; top: 60px; background-color: #337AB7; width: 50px; height: 50px; border-radius: 50px; } </style> <script type="text/javascript" src="jquery-1.11.0.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { var $div = $(‘.btn‘), $ball = $(‘.ball‘); $div.on(‘click‘, function() { $ball.animate({left: ‘200px‘, top: ‘200px‘}, ‘slow‘, ‘jswing‘); }) }); </script> </head> <body> <div class="btn">开始</div> <div class="ball"></div> </body> </html>
原文：http://www.cnblogs.com/jerry19890622/p/4261371.html