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 创建Dom元素
May 07 Javascript
php中给js数组赋值方法
Mar 10 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
vue $mount 和 el的区别说明
Sep 11 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
Snoopy类使用小例子
2008/04/15 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
珍惜水资源建议书
2014/03/12 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
个人求职自荐信范文
2014/06/20 职场文书
信用卡工资证明格式
2014/09/13 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
律政俏佳人观后感
2015/06/09 职场文书