jquery中的动画

ゝ一世哀愁。 2022-07-16 10:54 152阅读 0赞

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()