jQuery 回调函数(callback)的使用和基础


Posted in Javascript onFebruary 26, 2015

还是先贴代码吧

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery.js"></script>

    </head>

<style>

body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}

    .box{

        width: 300px;

        height: 300px;

        background: green;

        border: 1px solid #e6e6e6;

        margintop: 50px;

        line-height: 200px;

        position: absolute;

    }

button{

    border: none;

    background: green;    

    width: 100px;

    height: 50px;

    line-height: 50px;

    color: #fff;

    font-size: 16px;

    margin-top: 50px;

    }

</style>

    <body>

        <button>点击开始动画</button>

        <div class="box" ></div>

        <script> 

            $(document).ready(function(){

              $("button").click(function(){

                var div=$(".box");

                div.animate({height:'200px',opacity:'0.4'},"slow");

                div.animate({width:'200px',opacity:'0.8'},"slow");

                div.animate({height:'100px',opacity:'0.4'},"slow");

                div.animate({width:'100px',opacity:'0.8'},"slow");

                div.animate({right:'100px',opacity:'0.8'},"slow");

                div.animate({bottom:'100px',opacity:'0.8'},"slow");

                div.animate({left:'100px',opacity:'0.8'},"slow");

                div.animate({top:'100px',opacity:'0.8'},"slow",function(){

                    alert("The paragraph is over");

                });

              });

            });

        </script> 

        <script>

            $(document).ready(function(){

                $("button").click(function(){

                    var div=$(".box");

                        div.animate({height:'300px',opacity:'0.4'},"slow");

                        div.animate({width:'300px',opacity:'0.8'},"slow");

                        div.animate({height:'100px',opacity:'0.4'},"slow");

                        div.animate({width:'100px',opacity:'0.8'},"slow",function(){

                    alert("The paragraph is over");

              
  });

                    });

                });

            });

        </script>

    </body>

</html>

所谓的回调函数,其实就是在 speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒  后面再添加函数,显示相对应的内容,以提示网民

小伙伴们对jQuery回调函数是否有了新的认识了呢,希望本文能给大家一些帮助。

Javascript 相关文章推荐
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 #Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 #Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 #Javascript
2则自己编写的jQuery特效分享
Feb 26 #Javascript
javascript制作网页图片上实现下雨效果
Feb 26 #Javascript
js实现格式化金额,字符,时间的方法
Feb 26 #Javascript
如何减少浏览器的reflow和repaint
Feb 26 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP fclose函数用法总结
2019/02/15 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
实例讲解PHP表单
2020/06/10 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
js 小数取整的函数
2010/05/10 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python绘制圆柱体的方法
2018/07/02 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
运动会领导邀请函
2014/01/10 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
观看建国大业观后感
2015/06/01 职场文书