要求：

  • 页面包含两个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. （转载）HTML--- input type=hidden

    (转载)http://www.blogjava.net/lansky07/archive/2007/04/05/108740.html HTML--- input type=hidden 关于< ...

  2. 【宽搜】Vijos P1360 八数码问题

    题目链接: https://vijos.org/p/1360 题目大意: 3x3格子上放1~8数字,一个空位,每次空位可与上下左右交换,固定终止布局,求输入的起始布局需要几步到达终止布局 题目思路: ...

  3. dll文件已经引用，但using找不到命名空间

    一:问题截图 二:解决办法 1.没看到lz的代码中有Vancl.Server的dll. 2.确实有编译不过的问题,是Vancl.WindowsServices这个工程的target framework ...

  4. HDU-2087 剪花布条

    http://acm.hdu.edu.cn/showproblem.php?pid=2087 剪花布条 Time Limit: 1000/1000 MS (Java/Others)    Memory ...

  5. HDOJ 2056 Rectangles

    Problem Description Given two rectangles and the coordinates of two points on the diagonals of each ...

  6. 简单的FOLLOW集演示程序

    /* * 该程序用于计算某个非终结符的 FOLLOW 集合 * RexfieldVon * 2013年6月30日16:02:47 */ #include <stdio.h> #includ ...

  7. Java Annotation 必须掌握的特性

    什么是Annotation? Annotation翻译为中文即为注解,意思就是提供除了程序本身逻辑外的额外的数据信息.Annotation对于标注的代码没有直接的影响,它不可以直接与标注的代码产生交互 ...

  8. Java调用R（二）_JRI

    推荐使用.相比RServe更灵活,效率更高. 基本步骤 1.  R中需要安装rJava包. 2.  系统变量Path加上 C:\Program Files\R\R-3.0.1\bin\i386;C:\ ...

  9. 360. Sort Transformed Array

    一元二次方程...仿佛回到了初中. 主要看a的情况来分情况讨论: =0,一次函数,根据b的正负单调递增递减就行了. <0,凸状..从nums[]左右两边开始往中间一边比较一边 从右往左 放: 0 ...

  10. S2SH框架集成详解(Struts 2.3.16 + Spring 3.2.6 + Hibernate 3.6.10)

    近期集成了一次较新版本的s2sh,出现了不少问题,网上资料也是良莠不齐,有的甚至就是扯淡,简单的把jar包扔进去就以为是集成成功了,在这里整理一下详细的步骤,若哪位有什么不同看法,可以留言,欢迎批评改 ...