jquery使用animate方法实现控制元素移动


Posted in Javascript onMarch 27, 2015

本文实例讲述了jquery使用animate方法实现控制元素移动。分享给大家供大家参考。具体分析如下:

通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute!

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({left:'250px'});
 });
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position,
and cannot be moved. To manipulate the position, 
remember to first set the CSS position property 
of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;
height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JS之相等操作符详解
Sep 13 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
jQuery获取标签文本内容和html内容的方法
Mar 27 #Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 #Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 #Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 #Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 #Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 #Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 #Javascript
You might like
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python调用fortran模块
2016/04/08 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Pytorch之parameters的使用
2019/12/31 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python内打印变量之%和f的实例
2020/02/19 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
python如何更新包
2020/06/11 Python
用python绘制樱花树
2020/10/09 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
error和exception有什么区别
2012/10/02 面试题
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
打架检讨书范文
2015/01/27 职场文书
保管员岗位职责
2015/02/14 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书