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代码示例(重构前后对比)
Jan 23 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
javascript 用函数实现继承详解
May 28 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP strtotime函数详解
2009/12/18 PHP
PHP编码转换
2012/11/05 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python的装饰器使用详解
2017/06/26 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python使用re模块验证危险字符
2020/05/21 Python
浅析Python面向对象编程
2020/07/10 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
商务英语毕业生自荐信范文
2013/11/08 职场文书
药学职务聘任书
2014/03/29 职场文书
网站推广策划方案
2014/06/04 职场文书
商业项目策划方案
2014/06/05 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
四风查摆剖析材料
2014/10/10 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python