[jQuery编程挑战]001：实现页面元素加速动画效果
要求：
- 页面包含两个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：实现页面元素加速动画效果的更多相关文章
- Vue页面跳转动画效果实现
Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
- JQuery能够高效地操作页面元素
关于DOM和CSS的页面元素选择: $("span"); //全部span元素 $("#elem"); //id为elem的元素 $(".c ...
- 最简单实用的JQuery实现banner图中的text打字动画效果！！！
下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...
- 基于swiper的移动端H5页面,丰富的动画效果
概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...
- Android开发之ViewPager实现多页面切换及动画效果（仿Android的Launcher效果）
Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下: 1.Vi ...
- 实现页面切换（动画效果实现，不用ViewPager）
源代码地址 http://download.csdn.net/detail/u013210620/8791687 先看主页面布局activity_main <?xml version=" ...
- 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画
HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...
- [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- 如何解决编译linux内核（解决声卡问题），遭遇fatal error: linux/limits.h: 没有那个文件或目录
最近帮一位上海的朋友搞一块小板,在ubuntu15.04 vivid上已经加载了对应了.ko驱动包 但关键是系统根本就枚举不到该声卡ALC5640,试了OpenSUSE也是一样的结果,看来是内核漏加载 ...
- HDOJ 2096 小明A+B
Problem Description 小明今年3岁了, 现在他已经能够认识100以内的非负整数, 并且能够进行100以内的非负整数的加法计算. 对于大于等于100的整数, 小明仅保留该数的最后两位进 ...
- 《Mathematical Olympiad——组合数学》——染色问题
恢复 继续关于<Mathematical Olympiad——组合数学>中问题的分析,这一篇文章将介绍有关染色的问题. 问题一: 将一些石头放入10行14列的矩形方格表内,允许在每个单元 ...
- poj3122
题目大意:馅饼(看起来像是一个简单点的题目啊,嘎嘎,希望是的吧) 我的生日即将来临按照习惯我将准备馅饼,不是一个馅饼,我有N块馅饼,有各种各样的味道和尺寸,当我的朋友来参加我的聚会平且他们都能得到一块 ...
- 11th day
今天MySQL数据库的基本知识就学完了,明天开始做小项目什么的,有点小激动啊... <?php // 定义$sql语句执行函数 function my_query($sql){ $result ...
- vs2008 多人同时开发项目时的代码注释规范格式 分类： C#小技巧 2014-04-23 14:12 297人阅读 评论(0) 收藏
多人同时开发一个项目,区分项目的那个窗体是谁开发的,例:下面的格式 /************************************************ 模块:服务器设置 ...
- 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 ...
- UML学习之类图
參考链接: http://www.uml.org.cn/oobject/201211231.asp 深入浅出UML http://www.open-open.com/lib/view/open132 ...
- Cocos2d-X学习——Android移植，使用第三方库.so被删掉问题
2014-05-26 导语:Cocos2dx在安卓上移植的时候,增加第三方库,却发现新加的so库被删掉了. 正文: 1.我的环境: cocos2d-x 2.2.3, ndk-r9 2.网上找了非常多, ...
- Android自动化测试之monkeyrunner工具
一.什么是monkeyrunner monkeyrunner工具提供了一个API,使用此API写出的程序可以在Android代码之外控制Android设备和模拟器.通过monkeyrunner,您可以 ...