要求：

  • 页面包含两个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. socket（TCP）发送文件

    一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.Componen ...

  2. Delphi 为TClientdataset定义结果集，并增加记录

    Delphi 为TClientdataset定义结果集,并增加记录 procedure addDefsFieldsForCDS(aDataSet: TClientDataSet);begin  aDa ...

  3. CodeForces 592B

    题目链接: http://codeforces.com/problemset/problem/592/B 这个题目没啥说的,画图找规律吧,哈哈哈 程序代码: #include <cstdio&g ...

  4. MySQL客户端执行外部sql文件命令

    客户端 source d:\bbs.sql 或者 \.  d:\bbs.sql

  5. JavaScript中的加号

    JavaScript中的加号“+”可以作为数学运算符的加,也可以作为字符串拼接,也可以作为一元运算符,表示正数. 1+2 "2"+"3" 3+"2&q ...

  6. A_star poj2449 k短路

    赛后填坑系列QAQ 贴代码呀 #include<iostream> #include<algorithm> #include<cstdio> #include< ...

  7. 使用iScroll和photoswipe写手机浏览图片的插件的几点经验

    首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...

  8. C#读写共享文件夹

    该试验分以下步骤: 1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.80.88.180,共享文件夹名字是test,test里面有两个文件:good.txt和bad.txt,访问权限,用 ...

  9. VMware下安装Ubuntu，那么必须安装VMware-tools，才能获得更好的体验，包括屏幕分辨率、声音、和windows共享剪贴板等等

    在VMware下安装Ubuntu,那么必须安装VMware-tools,才能获得更好的体验,包括屏幕分辨率.声音.和windows共享剪贴板等等. 个人觉得安装vmware-tools很重要的几点: ...

  10. JavaScript和prototype

    Protoype这个词在javascript中可以有两种理解: 第一种是作为javascript中的一个属性,其一般出现的形式为:类名.prototype. prototype 属性让你有能力向对象添 ...