<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. python获得多个输入值

    我们都知道python的input()函数是以字符串的形式输入的,这就产生了一个问题:当我们在一行内输入多个数值时,input()不会去判断输入元素个数,它只管把这行输入以字符串的形式输入,因此我们要 ...

  2. 详解YUV数据格式

    我们在讲 FFmpeg 系列的时候,有提到 YUV 的.其中包括YUV播放器.简单的YUV格式介绍. 一.YUV简介 YUV,是一种颜色编码方法.常使用在各个影像处理元件中. YUV在对照片或影片编码 ...

  3. 网络流(2)——用Ford-Fullkerson算法寻找最大流

    寻找最大流 在大规模战争中,后勤补给是重中之重,为了尽最大可能满足前线的物资消耗,后勤部队必然要充分利用每条运输网,这正好可以用最大流模型解决.如何寻找一个复杂网络上的最大流呢? 直觉上的方案 一种直 ...

  4. python使用face_recognition包的环境设置

    在使用face_recognition包进行人脸识别时,环境是非常重要的,但是网上办法特别纷杂,今天介绍一种特别简单的办法,希望能帮助到大家,少走些坑. 1.首先应该下载dlib安装包(例如:dlib ...

  5. Java面试之synchronized 和 static synchronized

    ​面试题: 答案: 不能 不能 不能 不能 能 正文 概述 通过分析这两个用法的分析,我们可以理解java中锁的概念.一个是实例锁(锁在某一个实例对象上,如果该类是单例,那么该锁也具有全局锁的概念), ...

  6. Html学习之五（嵌套之简单购物界面设计）

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

  7. 【西北师大-2108Java】第四次作业成绩汇总

    [西北师大-2108Java]第四次作业成绩汇总 深入理解程序设计中算法与程序的关系: 深入理解java程序设计中类与对象的关系: 理解OO程序设计的第2个特征:继承.多态: 学会采用继承定义类设计程 ...

  8. MongoDB图形化工具（三）

    一.安装 下载地址:https://www.mongodbmanager.com/download 注意:在下载的时候需要对应上自己安装的mongodb版本. 双击安装 选择“Full install ...

  9. LG2921 [USACO2008DEC]Trick or Treat on the Farm 内向基环树

    问题描述 LG2921 题解 发现一共有 \(n\) 个点,每个点只有一条出边,即只有 \(n\) 条边,于是就是一个内向基环树. \(\mathrm{Tarjan}\) 缩点. 但是这个题比较猥琐的 ...

  10. glade No package 'libxml-2.0' found

    ------------恢复内容开始------------ 今天突发奇想 root@Aja:~/下载/libxml2-master# glade 不会用纳 百度一下——————————>> ...