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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
javascript连续赋值问题
Jul 08 Javascript
javascript冒泡排序小结
Apr 10 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
node.js实现快速截图
Aug 27 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
VUE长按事件需求详解
Oct 18 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 SplObjectStorage使用实例
2015/05/12 PHP
php实现微信支付之现金红包
2018/05/30 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
javascript回调函数详解
2018/02/06 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
浅谈vue项目打包优化策略
2018/09/29 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
python安装Scrapy图文教程
2017/08/14 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Pytorch to(device)用法
2020/01/08 Python
python map比for循环快在哪
2020/09/21 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
python中if嵌套命令实例讲解
2021/02/25 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
元旦促销方案
2014/03/15 职场文书
实习介绍信范文
2015/05/05 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
热血教师观后感
2015/06/10 职场文书
单位同意报考证明
2015/06/17 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
人生感悟经典句子
2019/08/20 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL