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在光标位置插入内容的实现代码
Jun 18 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
浅谈jquery事件处理
Apr 24 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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
很实用的一个完整email发送程序
2006/10/09 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php生成二维码
2015/08/10 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
javascript中的面向对象
2017/03/30 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python实现京东秒杀功能
2018/07/30 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
优秀学生自我鉴定范例
2013/12/18 职场文书
工地门卫岗位职责
2013/12/30 职场文书
节约粮食标语
2014/06/18 职场文书
mysql sql常用语句大全
2022/06/21 MySQL
Python中的 No Module named ***问题及解决
2022/07/23 Python