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") //匹配指定名称的所有元素 $(" ...
随机推荐
- Erasure Coding in WAS简单译文
原文:<Erasure Coding in Windows Azure Storage.pdf>,地址:https://www.usenix.org/system/files/confer ...
- 用Winrar批量解压缩有密码文件方法，只需输入一次密码
老王上传的文件多是RAR压缩格式的, 每个系列下载完,都20多集,解压缩的时候要一个一个的输入密码,太浪费时间. 1) 把下载的需要解压缩的文件统一放到一个文件夹下. 2) 启动winrar程序 (从 ...
- 启动mysql错误解决方案，学会查看错误日志：mysql.sock丢失，mysqld_safe启动报错
本人还是个菜鸟,下面是我的经验之谈,能解决一些问题,有不对的地方,敬请斧正. 我的是CentOS6.3+MySQL5.1.57. 重启了一次服务器后,使用> mysql -u root -p登陆 ...
- BizTalk 2010/2013 EDI B2B
BizTalk 2010/2013 EDI B2B项目实践(1) BizTalk 2010/2013 EDI B2B项目实践(1) BizTalk开发标准EDI B2B是件非常容易的事情,但对于初 ...
- Kemaswill 机器学习 数据挖掘 推荐系统 Ranking SVM 简介
Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning to Rank的简介请见我的博文Le ...
- Drupal与大型网站架构（译）- Large-Scale Web Site Infrastructure and Drupal
Drupal与大型网站架构(译)- Large-Scale Web Site Infrastructure and Drupal Linuxjournal 网站经典文章翻译,原文地址: Large-S ...
- JBoss + EJB3 + MySql : 开发第一个EJB
JBoss开发Bean并不困难,而对于不知道的人来说,数据库配置才是比较棘手的问题.现在我们就来一步一步开发一个EJB3 + MySql的Bean. 一.MySql数据库的配置 1. 配置数据源 在 ...
- 玩转docker镜像和镜像构建
摘要 本文从个人的角度,讲述对于docker镜像和镜像构建的一些实践经验.主要内容包括利用docker hub进行在线编译,下载镜像,dind的实践,对于镜像的一些思考等.本文是对当时微信分享内容的一 ...
- 结构-行为-样式-PS笔记
1.矩形选框,按住Shift就可以成为正圆或者正方形.按住ALt就可以控制圆心的位置: 2.美颜:滤镜--模糊--回到开始--历史记录工具,去掉不要的地方. 3.套索工具双击闭合:4.钢笔工具是做选区 ...
- HDU--1006
题目介绍 Problem Description The three hands of the clock are rotating every second and meeting each oth ...