要求：

  • 页面包含两个HTML元素：一个按钮，一个小方块
  • 动画要求：点击按钮，小方块从页面坐标300,300，加速移动到0,0
相关知识点：
  • jQuery动画方法animate
  • easing参数的设置

　　

<!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>

[jQuery编程挑战]001：实现页面元素加速动画效果的更多相关文章

  1. Vue页面跳转动画效果实现

    Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d

  2. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  3. JQuery能够高效地操作页面元素

    关于DOM和CSS的页面元素选择: $("span");     //全部span元素 $("#elem");  //id为elem的元素 $(".c ...

  4. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  5. 基于swiper的移动端H5页面,丰富的动画效果

    概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...

  6. Android开发之ViewPager实现多页面切换及动画效果（仿Android的Launcher效果）

    Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下:       1.Vi ...

  7. 实现页面切换（动画效果实现，不用ViewPager）

    源代码地址 http://download.csdn.net/detail/u013210620/8791687 先看主页面布局activity_main <?xml version=" ...

  8. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

  9. [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Subsets —— LeetCode

    Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset must ...

  2. Jenkins 九： 小技巧

    1.  问题: jenkins的项目默认存放在 JENKINS_HOME下面的 workspace路径下,导致每次找项目都很不方便. 解决思路:更改jenkins的项目存放地址. 解决方法: 1) 将 ...

  3. python 解析 配置文件

    资料: https://docs.python.org/3/library/configparser.html 环境 python 3.4.4 RawConfigParser方式 example.cf ...

  4. Demon_动画控制（实现前后左右移动，喊叫）

    using UnityEngine; using System.Collections; public class PlayerAnimation : MonoBehaviour { float ve ...

  5. 自动开机和自动关机设定方法（包括linux和windows）

    (一) linux 机器 1.关机 : 编辑 /etc/crontab添加一条并且保证crontab服务的运行即可 f1 f2 f3 f4 f5 root sudo shutdown –h now 假 ...

  6. Jquery AJAX 调用WebService服务

    对Jquery+JSON+WebService的一点认识 文章不错:http://www.cnblogs.com/tyb1222/archive/2011/10/13/2210549.html Jqu ...

  7. 批量更新数据小心SQL触发器的陷阱

    批量更新数据时候,Inserted和Deleted临时表也是批量的,但触发器只会调用执行一次!两个概念千万不要弄混淆! 错误的理解:例如:创建在A表上创建了一个Update触发器,里面写的是Updat ...

  8. leetcode第一刷_Interleaving String

    有关这样的字符串的题真是层出不穷啊,并且他们都有这样一个特点,就是递归的思路如此简单,但一定超时! 这个时候,dp就朝我们缓缓走来.递归超,dp搞!这道题的状态转移方程还是比較好写的,用ispart[ ...

  9. [ES6] Array.findIndex()

    In es5, you can use indexOf to get the index of one item in an array. In es6, you can use findIndex( ...

  10. MYSQL 体系结构图 log commit