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 FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
javascript实现留言板功能
Feb 08 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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生成等比缩略图类和自定义函数分享
2014/06/25 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
Position属性之relative用法
2015/12/14 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
shiro授权的实现原理
2017/09/21 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
感恩节活动方案
2014/01/27 职场文书
物业管理专业自荐信
2014/07/01 职场文书
台风停课通知
2015/04/24 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL