<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. bayaim_hadoop 开篇 0.0

    ------------------bayaim_hadoop 开篇 0.0 -----2018年11月19日09:21:46--------------------------------- 前言: ...

  2. BayaiM__linux双网卡绑定文档

    BayaiM__linux双网卡绑定文档 开门贱山:以下内容纯属原创,如有雷同,爱咋咋滴吧~~!!—————————————————————————————————————————— 1,备份网卡信息 ...

  3. MySQL 部署 MHA 高可用架构 (二)

    实现 MHA VIP 功能 配置 master_ip_failover 脚本(db3) 把 master_ip_failover 上传到 /iba/software 上 master_ip_failo ...

  4. Python—系统模块(os和sys)

    os模块 https://www.cnblogs.com/feifeifeisir/p/9519282.html sys模块 获取Python版本信息 import sys a = sys.versi ...

  5. MATLAB常见的学习率下降策略

    MATLAB常见的学习率下降策略 凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. 几种常见的学习率下降策略(learning rate decay st ...

  6. luoguP3979 遥远的国度

    换根的树剖 https://www.luogu.org/problem/P3979 题意: (出题人口活好.... 给定一棵以 root 为根的 n 个点的有根树,对于任意一个点 x, 给定他 的点权 ...

  7. CodeForces 984C Finite or not?

    http://codeforces.com/problemset/problem/984/C Time limit    1000 msMemory limit    262144 kB 题目 You ...

  8. Chatbot：

    讲清了一些最最基本的概念 - Intents(意图)和Entities(关键字) - 基于意图(Intent-based)的对话 和 基于流程(Flow-based)的对话  聊天机器人教学:使用Di ...

  9. Python 协程 (Coroutine)

    协程 (Coroutine) 什么是协程 协程(微线程)是比线程更轻量化的存在,像一个进程可以拥有多个线程一样,一个线程也可以拥有多个协程 最重要的是,协程不是被操作系统内核所管理,而完全是由程序所控 ...

  10. java创建泛型的实例

    如果存在泛型 T ,要创建它的实例,以下方式行不通 public class xxx { privaye E[] data ; public xxx() { data = new E[10] ; } ...