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 ...
随机推荐
- BayaiM__MySQL 常用函数
BayaiM__MySQL 常用函数 原创 作者:bayaim 时间:2016-06-16 09:11:13 122 0删除编辑 MySQL 常用函数 阅读(883430) | 评论(44543) ...
- HiGV ui代码流程
在海思PDT_Init下有一个这样的函数HI_PDT_UI_Init(): 1. HI_PDT_UI_Init()函数: /*public, it should be called by main() ...
- 监控类shell脚本
1)开头加解释器:#!/bin/bash 2)语法缩进,使用四个空格:多加注释说明. 3)命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用. 4)默认变量是全局的,在函数中变量l ...
- 无序数组中用 快速排序的分治思想 寻找第k大元素
#include <stdio.h> int *ga; int galen; void print_a(){ ; i < galen; i++){ printf("%d & ...
- JS阻止冒泡和取消默认事件(默认行为)
本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...
- 解决Warning: Permanently added ' 192.168.1.230'(RSA) to the list of known hosts.
前提 当我在刚安装的Red Hat Linux5.x系统中进行ssh 192.168.1.230 远程时,出现以下错误: Warning: Permanently added ' 192.168.1. ...
- JBoss4.2.2配置及优化
本文是在[url=http://solarisxb.cublog.cn]SOLARIS小兵[/url]的[url=http://blog.chinaunix.net/u/504/showart_114 ...
- Java连载38-对象封装性格式、构造方法
一.封装的步骤 (1)所有属性私有化,使用private关键字进行修饰,private表示私有的,修饰的所有数据只能在本类中进行访问. (2)对外提供简单的操作入口,也就是说以后外部程序要想访问age ...
- Kubernetes容器集群管理环境 - Node节点的移除与加入
一.如何从Kubernetes集群中移除Node比如从集群中移除k8s-node03这个Node节点,做法如下: 1)先在master节点查看Node情况 [root@k8s-master01 ~]# ...
- 解决centos ssh连接很慢的问题
更改配置文件vi /etc/ssh/sshd_config找到UseDNS 将UseDNS前面的#删除,并将YES改为NO,若找不到UseDNS,则手动添加UseDNS,并将其设置成No保存并重启ss ...