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 相关文章推荐
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 Javascript
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四舍五入精确小数位及取整
2014/01/14 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP内核探索之变量
2015/12/22 PHP
让您的菜单不离网站
2006/10/03 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python函数参数操作详解
2018/08/03 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
如何解决python多种版本冲突问题
2020/10/13 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
毕业生求职信
2014/06/10 职场文书
安全责任书怎么写
2014/07/28 职场文书
地震捐款倡议书
2014/08/29 职场文书
邀请函范文
2015/02/02 职场文书
工作失职检讨书范文
2015/05/05 职场文书
美丽心灵观后感
2015/06/01 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
DQL数据查询语句使用示例
2022/12/24 MySQL