jquery系列教程5-动画操作全解
来源:互联网 发布:ubuntu emacs 编辑:程序博客网 时间:2024/05/16 19:09
点击打开:
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全
jquery中的动画操作全解:
动画函数都可以选择性传递速度和回调函数
显示隐藏
hide(speed,callback)
$cr.hide(); //元素隐藏,会记住diaplay原始属性$cr.css("display","none"); //元素隐藏,忘记diaplay原始属性$cr.show(); //元素显示,回复diaplay原始属性$cr.hide('slow'); //传递字符串型参数 'slow'600ms,'fast'200ms,'normal'400ms。没有参数表示立即实现$cr.show(1000,function(){ //传递整型速度参数,和回调函数 alert("显示结束");});$cr.toggle(); //切换元素可见性动画
透明度
fade(speed,easing,callback)
$cr.fadeOut('slow',"swing"); //元素淡出 "swing" - 在开头/结尾移动慢,在中间移动快,"linear" - 匀速移动$cr.fadeIn(); //元素淡入$cr.fadeTo(600,0.2); //改变元素不透明度动画$cr.fadeToggle(); //改变元素不透明度实现元素可见性动画
滑动
slide(speed,callback); 改变元素的display属性
$cr.slideDown(); //向下滑动元素$cr.slideUp(); //向上滑动元素$cr.slideToggle(); //切换元素高度动画
自定义动画
animate({params},speed,callback)
if(!$cr.is(":animated")){ //判断元素是否处于动画状态 $cr.animate({ //同一个animate内的动画为并行 left:'250px', //position属性必须设置成relative或absolute height:'+=150px', //使用相对值 width:'toggle' //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"。其中opacity的'show'表示fadeIn, height的'show'表示slideDown,在属性上设置show表示出现 },'slow',function(){ alert("动画执行完成"); }) .delay(1000) //延迟时间,使用链式写法 .animate({fontSize:'3em'},"slow"); //多个animate之间是顺序执行的}else{ //停止动画 stop(stopAll,goToEnd); stopAll表示是否清除后续所有动画,默认false,goToEnd表示当前动画是否立即执行完成,默认为false。 $cr.stop(); //不带参数时,会清除在被选元素上指定的当前动画}
阅读全文
2 0
- jquery系列教程5-动画操作全解
- jquery系列教程3-DOM操作全解
- jquery系列教程4-事件操作全解
- jquery系列教程2-style样式操作全解
- jquery系列教程1-选择器全解
- jquery系列教程6-ajax的应用全解
- js系列教程1-数组操作全解
- js系列教程6-BOM操作全解
- js系列教程7-DOM操作全解
- 最全动画系列教程-登录动画效果
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
- js系列教程5-数据结构和算法全解
- css系列教程1-选择器全解
- js系列教程8-事件全解
- Vue.js 系列教程 5:动画
- Vue.js 系列教程 5:动画
- iOSCoreAnimation动画系列教程
- jQuery操作动画队列
- POJ 2330 Watchcow(欧拉回路)
- c++ ;类的继承(二)
- [practice]cpp primer 1 script
- 重构SQLHelper
- GitHub for windows中文乱码问题
- jquery系列教程5-动画操作全解
- 关于cygwin/msys/msys2/mingw/mingw64
- 2017百度之星资格赛1003(完全背包)
- DSP入门应该懂得57个问题
- Xshell 5常用命令(自己整理的,不全)
- 微信开发出现“该公众号暂时无法提供服务,请稍后再试”的坑
- JavaScript HTML DOM – 改变 CSS
- ubuntu 16.04 安装NVIDIA,cuDNN
- jquery系列教程6-ajax的应用全解