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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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
第三节--定义一个类
2006/11/16 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
javascript 写类方式之九
2009/07/05 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
改进Django中的表单的简单方法
2015/07/17 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python向图片里添加文字
2019/11/26 Python
python如何实时获取tcpdump输出
2020/09/16 Python
在C#中如何实现多态
2014/07/02 面试题
什么是设计模式
2012/06/17 面试题
学期自我鉴定
2013/11/04 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
考试退步检讨书
2014/01/15 职场文书
职务聘任书范文
2014/03/29 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
安全宣传标语
2014/06/10 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
董事长年会致辞
2015/07/29 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
如何Tomcat中使用ipv6地址
2022/05/06 Servers
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python