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插件 cluetip 关键词注释
Jan 12 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
Vue动态组件实例解析
Aug 20 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
JavaScript this关键字的深入详解
Jan 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的计数器程序
2006/10/09 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
非常好的js代码
2006/06/27 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
经典c++面试题六
2012/01/18 面试题
品质主管的岗位职责
2013/12/04 职场文书
学生自我鉴定
2013/12/18 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
个人求职自荐信范文
2014/06/20 职场文书
公证委托书
2014/08/01 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
关于远足的感想
2015/08/10 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers