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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
javascript每日必学之封装
Feb 23 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
javascript设计模式之装饰者模式
Jan 30 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将csv文件导入到mysql数据库的方法
2014/12/24 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python编程的核心知识点总结
2021/02/08 Python
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
Java基础面试题
2012/11/02 面试题
安全检查与奖惩制度
2014/01/23 职场文书
安全横幅标语
2014/06/09 职场文书
本科应届生自荐信
2014/06/29 职场文书
2015高考寄语集锦
2015/02/27 职场文书
父亲去世追悼词
2015/06/23 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书