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 ajax 登录验证实现代码
Sep 23 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
layui表格数据复选框回显设置方法
Sep 13 Javascript
Vue 实现html中根据类型显示内容
Oct 28 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP中的CMS的涵义
2007/03/11 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
JS面向对象编程浅析
2011/08/28 Javascript
JS定时器实例
2013/04/17 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python实现堆栈与队列的方法
2015/01/15 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Python3 修改默认环境的方法
2019/02/16 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
求职信模版
2013/11/30 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
环保建议书500字
2014/05/14 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
5.12护士节活动总结
2015/02/10 职场文书