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实现的类似购物商城的购物车
Dec 06 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
使用PHP编写的SVN类
2013/07/18 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python单链表简单实现代码
2016/04/27 Python
对python中的pop函数和append函数详解
2018/05/04 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python必须了解的35个关键词
2020/07/16 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
DBA的职责都有哪些
2012/05/16 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
建筑自我鉴定
2013/10/19 职场文书
业务助理岗位职责
2013/11/18 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
校园活动策划书范文
2014/01/10 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
停水通知
2015/04/16 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python