jQuery基础的动画里面的回调函数
<style>
*{margin:0; padding:0;}
#target{
border-radius:10px;
background:#eee;
}
.fade{/*动画起始状态*/
height:104px; width:970px; opacity:1;
padding: 10px;
border: 1px solid #aaa;
overflow:hidden;
}
.out{/*动画结束状态*/ }
</style>
</head>
<body>
<h1>jQuery动画函数——显示隐藏动画</h1>
<button id="btn1">显示/隐藏div</button>
<div id="target">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis animi sint iste sequi sunt ad excepturi error labore molestiae est expedita eos nisi placeat provident dolorem quos facilis! Sapiente!</span><span>Accusamus neque id reprehenderit! Voluptatem in deleniti laboriosam commodi facere magnam impedit minima corrupti distinctio culpa amet optio natus esse. Inventore incidunt ab id perspiciatis atque minus magnam tempore harum.</span></p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("#btn1").click(function(){
//这个this代表btn1
console.log($(this));
$("#target").animate({
opacity:0
},2000,function(){
//回调函数，在动画执行完后执行的代码
//这个this代表target
console.log($(this));
$(this).hide();
});
$("#target").click(function(){
alert("疼");
})
//.toggle(3000)
//.slideToggle(3000)
//.fadeToggle(3000)
//为动画函数添加回调函数，输出"动画结束"
});
</script>
</body>
jQuery基础的动画里面的回调函数的更多相关文章
- Jquery基础之动画操作
Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- jQuery使用（）：Callbacks回调函数列表之异步编程(含源码分析)
Callbacks的基本功能回调函数缓存与调用 特定需求模式的Callbacks Callbacks的模拟源码 一.Callbacks的基本功能回调函数缓存与调用 Callbacks即回调函数集合,在 ...
- 【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- jQuery中ajax方法无法执行回调函数问题
最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...
- 使用代码给Unity中的动画片段绑定回调函数
在制作动作游戏的时候,需要播放许多动画,同时还有个需求,那就是动画播放到一定时间时,给一个回调函数,好做对应的状态变更, 我查了一下,发现如果使用的是unity自带的动画系统,要做到这样的话,需要这样 ...
- 【Cocos2d-x 3.0 基础系列一】 各类回调函数写法汇总
一.button回调 1. Lambda 表达式,C++11 Lambda 赋予了Cocos2d-x 3.0创建回调函数的灵活性. auto itemNor = Sprite::create(&quo ...
随机推荐
- Git的使用（2）
一.git在不同平台下的安装 (1)在linux上安装 如果以centos为例,可以使用yum安装,如下命令: sudo yum install git 如果你在基于debian的发行版上,尝试使用: ...
- RAID10（5块硬盘）的简介和创建
一. RAID10简介 (1)兼具速度和安全性,但成本很高. (2)继承了RAID0的快速与RAID1的安全,RAID1在这里提供了冗余备份的阵列,而RAID0则负责数据的读写阵列.因这 ...
- AtCoder Beginner Contest 145
传送门 A - Circle 签到. B - Echo 签到到. C - Average Length 要卡下精度,可用二分或者long double来搞. Code /* * Author: hey ...
- JAVA字符串转换整数
public class compint { /** * @param args */ public static void main(String[] args) { // TODO Auto-ge ...
- CSS中的选择器（一）
API文档:http://css.cuishifeng.cn/all.html 1. 通配选择符(*) 语法: * { sRules } 说明: 通常不建议使用通配选择符,因为它会遍历并命中文档中所有 ...
- CF1185F Two Pizzas
CF1185F Two Pizzas 洛谷评测传送门 题目描述 A company of nn friends wants to order exactly two pizzas. It is kno ...
- 二分法查找（C语言）
二分法是一种高效的查找方法,其适用于已经排好序的数组 基本思路 从数组最中间的数开始查找判断,若不是需要查找的数字,则比较大小,之后则在从中间分开的两边中的一边从最中间开始查找判断,以此类推 算法描述 ...
- Codeforces Round #575 (Div. 3) D2. RGB Substring (hard version) 水题
D2. RGB Substring (hard version) inputstandard input outputstandard output The only difference betwe ...
- 使用mybatis动态where字句方法
上篇文章介绍了如何使用mybatis-generator生成实体类.Mapper接口代码,其中生成的Mapper接口代码是不带ByExample方法的.本篇文章将介绍如何使用mybatis-gener ...
- docker 更新内存限制步骤
停止容器: docker stop id 更新配额: docker update -m 80G id 内存参数和大小 容器ID重启容器:docker start id