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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
用javascript制作qq注册动态页面
Apr 14 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编码规范-php coding standard
2007/03/16 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
详解jQuery选择器
2016/12/21 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python re模块的高级用法详解
2018/06/06 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python画环形图的方法
2020/03/25 Python
python/golang 删除链表中的元素
2020/09/14 Python
红领巾心向党广播稿
2014/01/19 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
绵山导游词
2015/02/05 职场文书
山楂树之恋观后感
2015/06/11 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python