<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基础的动画里面的回调函数的更多相关文章

  1. Jquery基础之动画操作

    Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...

  2. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  3. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  4. jQuery使用（）：Callbacks回调函数列表之异步编程(含源码分析)

    Callbacks的基本功能回调函数缓存与调用 特定需求模式的Callbacks Callbacks的模拟源码 一.Callbacks的基本功能回调函数缓存与调用 Callbacks即回调函数集合,在 ...

  5. 【总结整理】JQuery基础学习---动画

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  6. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  7. jQuery中ajax方法无法执行回调函数问题

    最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...

  8. 使用代码给Unity中的动画片段绑定回调函数

    在制作动作游戏的时候,需要播放许多动画,同时还有个需求,那就是动画播放到一定时间时,给一个回调函数,好做对应的状态变更, 我查了一下,发现如果使用的是unity自带的动画系统,要做到这样的话,需要这样 ...

  9. 【Cocos2d-x 3.0 基础系列一】 各类回调函数写法汇总

    一.button回调 1. Lambda 表达式,C++11 Lambda 赋予了Cocos2d-x 3.0创建回调函数的灵活性. auto itemNor = Sprite::create(&quo ...

随机推荐

  1. 基于Spark.NET和ML.NET Automated ML (自动学习)进行餐厅等级的检查预测

    简介 Apache Spark是一个开源.分布式.通用的分析引擎.多年来,它一直是大数据生态系统中对大型数据集进行批量和实时处理的主要工具.尽管对该平台的本地支持仅限于JVM语言集,但其他通常用于数据 ...

  2. jdk的一条命令查看运行参数

    jps 查看运行的java进程; jinfo <pid> 查看 jvm 配置参数

  3. jacoco统计自动化代码覆盖率

    jacoco统计自动化代码覆盖率 1. 简介 1.1. 什么是Jacoco Jacoco是一个开源的代码覆盖率工具,可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件,也可以 ...

  4. ACM-单向链表的操作

    数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出. 输入描述: 先输入键值对的个数然后输入成对的index和value值,以空格隔 ...

  5. Html学习之十七（表格与表单学习--排行版制作）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Html学习之四（页面布局）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. web-never give up

    打开题目连接 ?id=1 ,疑是注入点 但是输入其他数字无果 打开源码,发现注释有网页链接 打开连接123.206.87.240:8006/test/1p.html 发现回到了bugku的论坛首页,应 ...

  8. GET POST 区分

    get传送的数据量较小,不能大于2KB.post传送的数据量较大,一般被默认为不受限制.但理论上,IIS4中最大量为80KB,IIS5中为100KB. get安全性非常低,get设计成传输数据,一般都 ...

  9. selenium环境搭建：

    环境搭建 基于python3和selenium3做自动化测试,俗话说:工欲善其事必先利其器:没有金刚钻就不揽那瓷器活,磨刀不误砍柴工,因此你必须会搭建基本的开发环境,掌握python基本的语法和一个I ...

  10. 实时获取input框内容

    源码: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...