要求：

  • 页面包含两个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. Merge Intervals——LeetCode

    Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[8,1 ...

  2. [Theano] Theano初探

    1. Theano用来干嘛的? Theano was written at the LISA lab to support rapid development of efficient machine ...

  3. 简单的闭包运算(Closure)演示程序

    /* * 该程序用于计算某个产生式的闭包 * RexfieldVon * 2013年8月9日16:01:38 */ #include <stdio.h> #include <stdl ...

  4. VMware: windows8 与 虚拟机ubuntu 14.04 共享文件夹

    假设当前用户为xxx 安装 VMwareTools 1. 打开 VMwareworkstation窗口,选择”虚拟机” -> “重新安装VMwareTools(T)”. 点击之后,会发现 Ubu ...

  5. 低版本Xcode 出现could not find developer disk image问题

    解决Xcode在ipad/iphone9.2系统真机测试时出现could not find developer disk image问题,只要拷贝这个文件(链接: http://pan.baidu.c ...

  6. 在eclipse下编译hadoop2.0源码

    Hadoop是一个分布式系统基础架构,由apache基金会维护并更新.官网地址: http://hadoop.apache.org/ Hadoop项目主要包括以下4个模块: Hadoop Common ...

  7. 004_Eclipse编写第一个Java_Web程序

    1.MyEclipse的菜单栏--File--Web Project,新建一个web工程 Project name 填上自己的项目名称,例如HelloWorld. 需要选择Java EE版本以及Tar ...

  8. Genymotion开始搞起~

    简介 一:什么是GenymotionGenymotion是一款完全超越BlueStacks的安卓模拟器,正如它中文官网的介绍:快到极致的Android模拟器.英文官网:http://www.genym ...

  9. CSS3伪类选择器 图示

         

  10. NuGet 无法连接到远程服务器-解决方法

    一. Entity Framework以下简称EF 安装EF4.3的步骤是首先安装VS扩展 NuGet,然后再使用NuGet安装EF程序包 安装完NuGet就可以安装EF了,有两种方式可以安装EF: ...