<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. win10输入法问题，已禁止IME 问题解决

    第一种较为简单的解决方法: windows+R打开「运行」,然后打ctfmon,确定. 另外一种解法: windows的老bug了解决办法: 1. I. WIN + X 打开控制面板 -> 管理 ...

  2. 【bzoj1997】[Hnoi2010]Planar（平面图+2-sat）

    传送门 几乎和这个题一样,就不说题意了,比较特殊的点就是,这里有个结论: 平面图的边数\(m<3n-6\),\(n\)为点数. 所以我们可以通过这个减枝,\(m\)较大时直接输出\(no\).小 ...

  3. Html学习之十一（CSS选择器的应用一）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. python3.5.3rc1学习九：正则表达式

    # 正则表达式 ''''' 正则表达式是有一些特殊字符组成,能够帮你找到一些符合一定规则的字符串 先来了解几个符号所代表的意思 \d 匹配所有的数字 \D 匹配所有,但是数字除外 \s 空格 \S 匹 ...

  5. java加密类

    java.security.KeyStore KeyStore ks = KeyStore.getInstance(type); KeyStore ks = KeyStore.getInstance( ...

  6. Python 链表(linked list)

    链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的 链表由一系列结点组成,结点可以在运行时动态生成 优点 由于不必须按顺序存储,链表在插入.删除的时候 ...

  7. Fink| API| Time与Window

    1. Flink 批处理Api 1.1 Source Flink+kafka是如何实现exactly-once语义的 Flink通过checkpoint来保存数据是否处理完成的状态: 有JobMana ...

  8. hdu6492 暴力预处理 + 枚举

    http://acm.hdu.edu.cn/showproblem.php?pid=6492 题意 他们一共有 n+m+2k 个人,包括 n+k 个男生,m+k 个女生,其中 k 对男女生为异性情侣, ...

  9. python3 消耗CPU的性能，使CPU满载（可以设置进程名称）

    需要安装库:setproctitle    1.1.10,设置进程名称,测试操作系统centos 7.0 # -*- coding: utf-8 -*- from multiprocessing im ...

  10. 在windows下使用VirtualEnv建立flask项目

    1.系统中安装VirtualEnv 在安装完Python后,自带的有pip或easy_install工具,可进行VirtualEnv的安装 pip install virtualenv 2.构造项目, ...