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系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
JavaScript闭包原理与用法实例分析
Aug 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
PHP页面实现定时跳转的方法
2014/10/31 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Numpy 多维数据数组的实现
2020/06/18 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
负责人任命书范本
2014/06/04 职场文书
工程负责人任命书
2014/06/06 职场文书
律师授权委托书范本
2014/10/07 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
课题研究阶段性总结
2015/08/13 职场文书
Python基础之Socket通信原理
2021/04/22 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android