jquery中的动画
来源:互联网 发布:启示录 知乎 编辑:程序博客网 时间:2024/05/17 22:17
show([showSpeed],[callback])//[]可选的。以[showSpeed]显示元素,[callback]动画结束后触发的函数
hide([hideSpeed],[callback]) 以[hideSpeed]隐藏元素
作用原理:
通过修改元素的display的值为none与否来显示或者隐藏元素。因此一切visibility属性被手动设置过的
元素对上两个方法失效,因为visibility属性与display属性是相斥的,你不可能让一个元素既不占用空
间又占用空间。
元素的height,width,透明度,都会随着显示/隐藏的过程而动态变化。
参数:
showSpeed/hideSpeed有jquery库设置的值:
"fast"(this is a default speed。what is default?空参时的默认值)200
"normal":400
"slow":600
也可以手动设置任意的合理值。
example:$("element").show(1000)//1s的时间显示
fadeIn([showSpeed],[callback])淡入
fadeOut([hideSpeed],[callback])淡出
与show/hide十分相似,就有一点差别:
元素的height,width不会变化,仅透明度随着淡入/淡出的过程而动态变化。
slideDown([showSpeed],[callback])滑开
slideUp([hideSpeed],[callback])滑起
这一对函数的机理也跟show/hide的十分相似,就有一点差别:
仅仅改变元素的高度,其它属性不变。
fadeTo(showSpeed,opacity,[callback])
普适:[showSpeed],[callback]参数适用于所有的jquery动画方法。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
自定义动画
animate(properties,[showSpeed],[callback])
properties:一个包含属性和值的映射,格式{propertyname:"value",propertyname2:"value2"...}
speed:展示用时,可选
callback:回调函数,可选
如果想要同时修改两个以上的属性:把这些要修改的属性放在同一个animate()里
如果想要分步骤修改属性:把这些要修改的属性按照步骤放在不同的animate()里
即:多个animate()是按定义的顺序执行的。
也可以在callback中修改属性,格式为:
$(this).animate({top:"200px",width:"+=10px",opacity:"1"},3000,function(){
$(this).css("property","value");
$(this).css("property2","value2");
//不可以通过css()方法一次设置多于一个属性,可能是无法再找到多个属性间的//间隔符号吧,我猜。因为参数中不可能出现分号,而逗号已经用来间隔属性名和值了。
});
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
对一些动画函数的替代,替换后的*toggle()实现自动检测元素状态,并在后两者之间切换
toggle() ———————— hide()/show()
slideToggle()————————slideDown()/slideUp()
fadeToggle()——————————fadeIn()/fadeOut()
0 0
- jQuery 中的动画
- jQuery 中的动画特效
- jQuery 中的动画
- jquery中的动画
- JQuery中的动画元素
- JQuery中的动画
- JQuery中的DOM动画
- jQuery中的动画
- jQuery中的动画
- jQuery中的动画
- jQuery中的动画
- jQuery中的动画
- JQuery中的动画整理
- jQuery中的动画
- jQuery中的动画
- jquery中的动画
- jQuery中的动画
- JQuery中的动画
- Maven远程Tomcat热部署
- 【CodeChef】 Queries on the String
- JavaScript入门<1>基础语法
- Java NIO通俗编程之缓冲区Buffer(三)
- linux总线设备驱动模型之Kobject&Kset
- jquery中的动画
- linux初学常用2
- 常用 Git 命令清单
- Best Time to Buy and Sell Stock with Cooldown
- 推荐几个程序设计竞赛网站
- ubuntu16.04安装mysql
- markdown
- android那些事--点阵显示内部分析
- python数据预处理