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
原创粉丝点击