<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. 基于socketsever下实现的FTP

    # ### 客户端client import socket import json import struct import os sk = socket.socket() sk.connect( ( ...

  2. 查找树ADT--二叉查找树

    二叉树的一个重要应用是它们在查找中的使用. 二叉查找树的性质:对于树中的每个节点X,它的左子树中所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项.这意味着该树所有的元素可以用某种一致的方式 ...

  3. CodeForces - 1256C （思维+贪心）

    题意 https://vjudge.net/problem/CodeForces-1256C 有一条宽度为n的河.河的左岸编号为0,右岸编号为n+1.河流上还有m个木制平台,第i个平台的长度为ci(所 ...

  4. RabbitMQ学习笔记（一、消息中间件基础）

    目录: 什么是消息中间件 消息中间件的作用 JMS规范 AMQP协议 RabbitMQ简介 Hello World 什么是消息中间件: 消息中间件(Message Queue Middleware,简 ...

  5. 【转】阿里云部署java web项目

    主要步骤:1. 购买阿里云服务器2. 远程连接3. 在云服务器上配javaweb环境:jdk,tomcat,MySQL4. 将项目的war文件放到Tomcat下关于云服务器ECS:如果还想在买服务器之 ...

  6. 从项目中理解let和const为什么如此重要

    变量声明 变量声明方式 伴随js诞生的var // 语法 var varName = value var a = 1 // 这样子你就得到了一个变量 var缺陷场景分析 var specialUser ...

  7. Note | PyTorch

    目录 0. 教程和笔记 1. 模型操作 2. 网络设计 卷积图示 填充(padding) 升采样 全连接层 3. 损失函数 交叉熵 4. 系统或环境交互 模型加载 5. 犯过的错误 损失异常 测试显存 ...

  8. golang实战--家庭收支记账软件（面向过程）

    1.开发流程 2.目标 模拟实现一个基于文本界面的(家庭记账软件) : 初步掌握编程技巧和调试技巧: 主要包含以下知识点:局部变量和基本数据类型.循环语句.分支语句.简单屏幕格式输出.面向对象编程: ...

  9. mysql 写计数器需要注意的问题

    MySql计数器,如网站点击数,如何实现高性能高并发的计数器功能 由于并发的时候 不能同时写入一行数据 所以要分开写<pre>先创建表CREATE TABLE `article_view` ...

  10. TP5 使用验证码功能

    工作中后台开发使用的是 TP5,但是对语法不是很熟悉,总是看着手册写代码.当时做 Java 的时候也是这样,很多语法需要靠百度.不是不能写代码,但是这样的效率感觉不高,没有行云流水的感觉,要是能有聊天 ...