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游戏之优化篇
Nov 08 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
js实现文字选中分享功能
Jan 25 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php获取url参数方法总结
2014/11/13 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Javascript倒计时代码
2010/08/12 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
PHP PDO操作总结
2014/11/17 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python实现验证码识别功能
2018/06/07 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python实现3D地图可视化
2020/03/25 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
人力资源管理专业应届生求职信
2013/09/28 职场文书
员工自我鉴定范文
2013/10/06 职场文书
设计专业自荐信
2014/06/19 职场文书
新闻传播专业求职信
2014/07/22 职场文书
家庭贫困证明
2014/09/23 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python