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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
网页自动跳转代码收集
Sep 27 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
SeaJS中use函数用法实例分析
Oct 10 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
第十五节--Zend引擎的发展
2006/11/16 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
javascript简易画板开发
2020/04/12 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
python 多线程应用介绍
2012/12/19 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python中的引用知识点总结
2019/05/20 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python csv模块使用方法代码实例
2019/08/29 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
会计电算化应届生自荐信
2014/02/25 职场文书
党员创先争优承诺书
2014/03/26 职场文书
指导老师鉴定意见
2015/06/05 职场文书
保险公司增员口号
2015/12/25 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python