要求:

  • 页面包含两个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. 如何解决编译linux内核(解决声卡问题),遭遇fatal error: linux/limits.h: 没有那个文件或目录

    最近帮一位上海的朋友搞一块小板,在ubuntu15.04 vivid上已经加载了对应了.ko驱动包 但关键是系统根本就枚举不到该声卡ALC5640,试了OpenSUSE也是一样的结果,看来是内核漏加载 ...

  2. HDOJ 2096 小明A+B

    Problem Description 小明今年3岁了, 现在他已经能够认识100以内的非负整数, 并且能够进行100以内的非负整数的加法计算. 对于大于等于100的整数, 小明仅保留该数的最后两位进 ...

  3. 《Mathematical Olympiad——组合数学》——染色问题

    恢复  继续关于<Mathematical Olympiad——组合数学>中问题的分析,这一篇文章将介绍有关染色的问题. 问题一: 将一些石头放入10行14列的矩形方格表内,允许在每个单元 ...

  4. poj3122

    题目大意:馅饼(看起来像是一个简单点的题目啊,嘎嘎,希望是的吧) 我的生日即将来临按照习惯我将准备馅饼,不是一个馅饼,我有N块馅饼,有各种各样的味道和尺寸,当我的朋友来参加我的聚会平且他们都能得到一块 ...

  5. 11th day

    今天MySQL数据库的基本知识就学完了,明天开始做小项目什么的,有点小激动啊... <?php // 定义$sql语句执行函数 function my_query($sql){ $result ...

  6. vs2008 多人同时开发项目时的代码注释规范格式 分类: C#小技巧 2014-04-23 14:12 297人阅读 评论(0) 收藏

    多人同时开发一个项目,区分项目的那个窗体是谁开发的,例:下面的格式 /************************************************       模块:服务器设置   ...

  7. Libgdx New 3D API 教程之 -- Libgdx中使用Materials

    This blog is a chinese version of xoppa's Libgdx new 3D api tutorial. For English version, please re ...

  8. UML学习之类图

    參考链接: http://www.uml.org.cn/oobject/201211231.asp  深入浅出UML http://www.open-open.com/lib/view/open132 ...

  9. Cocos2d-X学习——Android移植,使用第三方库.so被删掉问题

    2014-05-26 导语:Cocos2dx在安卓上移植的时候,增加第三方库,却发现新加的so库被删掉了. 正文: 1.我的环境: cocos2d-x 2.2.3, ndk-r9 2.网上找了非常多, ...

  10. Android自动化测试之monkeyrunner工具

    一.什么是monkeyrunner monkeyrunner工具提供了一个API,使用此API写出的程序可以在Android代码之外控制Android设备和模拟器.通过monkeyrunner,您可以 ...