JQuery笔记(二)jq常用方法animate()
在jq中,比较方便的是相对于js,jq封装了很多方法,很方便使用,下面我举几个常用的方法
animate()方法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head> <body>
<div id="jq1"></div> <script>
//alert($("div")[0]);
//通过alert可以知道$("div")[0]是一个dom元素,后面可以通过符号.来点出一些style之类的属性
$(jq1)[0].style.width = "100px";
$(jq1)[0].style.height = "100px";
$(jq1)[0].style.background = "red";
$(jq1)[0].style.position = "absolute"; //这里我用一个mouseenter方法下触发一个animate()方法
//jq官网看不懂,从国内翻译的看吧
$(jq1).mouseenter(function() {
//$(selector).animate({params},speed,callback);
//{}里面的属性和参数通过符号:链接
//speed可以控制速度
$(this).animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
}, 1000)
//上面的例子,我控制了宽高透明度以及定位,时间是1秒
});
</script> </body> </html>
实现效果如下:
可以看到,根据我设置的 width,height,opacity,left,我的小红移动了
而且值得注意的是,在这个animal方法可以回调,代码如下
<script>
//alert($("div")[0]);
//通过alert可以知道$("div")[0]是一个dom元素,后面可以通过符号.来点出一些style之类的属性
$(jq1)[0].style.width = "100px";
$(jq1)[0].style.height = "100px";
$(jq1)[0].style.background = "red";
$(jq1)[0].style.position = "absolute"; //这里我用一个mouseenter方法下触发一个animate()方法
//jq官网看不懂,从国内翻译的看吧
$(jq1).mouseenter(function() {
//$(selector).animate({params},speed,callback);
//{}里面的属性和参数通过符号:链接
//speed可以控制速度
$(this).animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
}, 1000, function() {
$(this).animate({
left: '0px',
opacity: '1',
height: '100px',
width: '100px'
}, 1000);
})
//上面的例子,我控制了宽高透明度以及定位,时间是1秒
});
</script>
在上面的代码中,我在speed后面加了一个匿名函数,只有在匿名函数中才能被第二次调用,这是一个比较奇怪的地方,直接用是不能使用的
$(selector).animate({params},speed,function(){
$(selector).animate();
});
通过这个回调,我设置了让小红框回到原来的样子,就不放图了
JQuery笔记(二)jq常用方法animate()的更多相关文章
- jQuery总结或者锋利的jQuery笔记二
第三章 jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) , 层次选择器(div ul),(div> ...
- jQuery笔记二——基础/动画
1. jQuery的基础语法: $(selector).action() 2. 很多jQuery的语句放在ready里面 $(document).ready(function(){ // jQuery ...
- JQuery笔记(一)jq的使用方法
我用的jq版本是支持pc版为主的最高1版本里最高的1.124版本 官网的链接是只有最新的3下载,我把我在官网下载的jq代码链接发出来,如下 点我获取jq代码 和js不同的是,jq开发者封装了一些方法 ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- 转)delphi chrome cef3 控件学习笔记 (二)
(转)delphi chrome cef3 控件学习笔记 (二) https://blog.csdn.net/risesoft2012/article/details/51260832 原创 2016 ...
- Jquery元素选取、常用方法
一:常用的选择器:(李昌辉) 基本选择器 $("#myDiv") //匹配唯一的具有此id值的元素 $("div") //匹配指定名称的所有元素 $(" ...
随机推荐
- 【转】title与alt的区别
html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的,当 ...
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成)
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...
- escape,encodeURI,encodeURIComponent函数比较
escape,encodeURI,encodeURIComponent函数比较 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数 ...
- 遍历Javascript数组的一种方法!
应用场景: 如果您的数组只用一次的话就适用这种方法,因为遍历完后数组便清空了.代码如下: var arr=[1,5,6,2,3]; for(;i=arr.shift();){ console.log( ...
- 利用命令行来安装应用到android虚拟机
1.首先将将android sdk中的adb添加到环境变量中确保在任意目录下运行adb都可以执行 2.将命令行切换到应用安装包所在未知 3.运行:adb install 应用名称即可
- MySQL SET TRANSACTION 设置事务隔离级别
1. 首先说一下autocommit 默认情况下autocommit的开关是打开的,也就是ON,查看方法 方法1. select @@[global/session].autocommit; 方法2. ...
- 如何在CMD下运用管理员权限
方法一:鼠标右键 这个方法比较比较普通, 点开开始找到cmd,右击鼠标“以管理员身份运行(A)”这样调用就是管理员的权限: 方法二:快捷模式 在点开win+R后,选择“以管理员身份运行”,然后确定:可 ...
- 微信小程序的动画效果
前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...
- .Net程序员学用Oracle系列(6):表、字段、注释、约束、索引
<.Net程序员学用Oracle系列:导航目录> 本文大纲 1.表 1.1.创建表 1.2.修改表 & 删除表 2.字段 2.1.添加字段 2.2.修改字段 & 删除字段 ...
- 第一章ASP.NETMVC
一.MVC的概念 MVC由三部分组成:视图(View).模型(Model).控制器(Controller)组成 二.运用VS创建MVC 1.新建一个"解决方案" 2.在" ...