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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 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/17 PHP
php支付宝接口用法分析
2015/01/04 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP中的事务使用实例
2015/05/26 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python实现股市信息下载的方法
2015/06/15 Python
Python中几个比较常见的名词解释
2015/07/04 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python3使用requests发闪存的方法
2016/05/11 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python iter()函数用法实例分析
2018/03/17 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
清洁工表扬信
2014/01/08 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL