delay()--一个很常用的jquery方法,制作页面动画效果的利器
2016-07-30 00:00
711 查看
摘要: 在欣赏微信公众号等移动端的网站代码时,发现delay()方法很常用。先mark下基础知识,以后有深入了解继续修改此文。
学一个jquery方法,必须先从小例子学起,直接上一个简单的例子:
为了理解,这个例子只是在http://www.runoob.com/try/try.php?filename=tryjquery_eff_delay2 上面稍作修改
需要注意的是,因为配合使用的是animate(),因此点击事件触发后,每一个执行代码都不是瞬发的,按照先后顺序,要等上一句执行代码动画执行完毕,才会执行下一句;
例如
$("div").animate({height:"200px"});
这句的动画完全执行完,才会执行
$("div").animate({height:"200px"});
这句
学一个jquery方法,必须先从小例子学起,直接上一个简单的例子:
为了理解,这个例子只是在http://www.runoob.com/try/try.php?filename=tryjquery_eff_delay2 上面稍作修改
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("#btn1").click(function(){ $("div").animate({height:"200px"}); $("div").animate({width:"300px"}); $("div").delay(3200).animate({height:"300px"}); $("div").delay(1200).animate({width:"600px"}); }); }); </script> </head> <body> <p>This example demonstrates the animate() method with three merged boxes.</p> <p>The third box is set to delay() for 1200 milliseconds.</p> <div style="background:purple;height:100px;width:100px;margin:6px;"> </div> <p><button id="btn1">Animate</button></p> </body> </html>
需要注意的是,因为配合使用的是animate(),因此点击事件触发后,每一个执行代码都不是瞬发的,按照先后顺序,要等上一句执行代码动画执行完毕,才会执行下一句;
例如
$("div").animate({height:"200px"});
这句的动画完全执行完,才会执行
$("div").animate({height:"200px"});
这句
相关文章推荐
- focus()和blur()--jquery的表单元素常用方法
- 避免jQuery名字冲突--noConflict()方法
- jquery ajax 实例
- jquery遍历函数.li ???
- JQuery动画效果
- 基于jQuery的插件
- JQuery Uploadify v3.2.1 上传图片并预览(基于spring mvc框架开发)
- 创建JQuery检测元素是否含有指定属性hasAttr的原型
- 【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
- JQuery对选择器的筛选API
- JQuery DOM操作、 事件和动画
- jquery的初始化的方法
- JQuery Datatables Columns API 参数详细说明
- jquery中的.detach()与.remove()的区别
- jQuery中each的break和continue
- jquery AJAX 实现文件上传
- 常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站
- springmvc用不了jquery问题解决
- jquery.query.js 插件的用法
- css中的伪元素:before :after与jQuery中的.before .after的区别