jQuery的动画效果

一、show()方法和hide()方法

1.show()与hide()
show()：根据hide()方法记住的display属性值来显示元素。
hide() : 将该元素的display样式改为 “none”，用来隐藏元素

2.参数让元素动起来：
单纯的调用show()和hide()相当于css(“display”,“none/block/inline”),不会有任何动画。如果希望调用元素慢慢显示/消失，则可以为show()/hide()方法指定一个速度参数.
参数：slow,normal,fast,数值（以毫秒为单位）

$(\"element\").show(\"slow\");     //元素将缓慢的显示出来$(\"element\").show(\"normal\");   //元素将默认速度显示出来$(\"element\").show(\"fast\");     //元素将迅速的显示出来$(\"element\").hide(\"1000\");     //元素将在1000毫秒(1秒)内慢慢地隐藏

注：对元素使用带参数的show()和hide()是从：高度，宽度，不透明度三个属性同时进行操作的。

二、fadeIn()方法和fadeOut()方法

fadeIn()/fadeOut() 只改变元素的不透明度。
fadeOut() 淡出：会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display:none”)。
fadeIn() 淡入：与fadeOut()完全相反。
fadeTo();淡入到
fadeToggle():淡入与淡出
例：

$(\"#panel h5.head\").toggle(function(){$(this).next(\"div.content\").fadeOut();},function(){$(this).next(\"div.content\").fadeIn();});

三、slideUp()方法和slideDown()方法

slideUp()/slideDown()只改变元素的高度。
slideDown()滑入：如果一个元素的display属性值为\”none\”，当调用slideDown()时，这个元素将由上至下延伸显示。
slideUp() 滑出：与slideDown()完全相反。
slideToggle():滑入与滑出
例：

$(\"#panel h5.head\").toggle(function(){$(this).next(\"div.content\").slideUp();},function(){$(this).next(\"div.content\").slideDown();});

jQuery animate() 方法用于创建自定义动画

语法：$(selector).animate({params},speed,callback);
params 参数是必须存在的，它定义形成动画的 CSS 属性。
比如{元素1: “value1”, 元素2: “value2”, ····· }
speed : 速度参数，可选。
callback : 在动画完成时执行的函数，可选。

<script>$(function(){//加载完成时$(\"button\").click(function(){//鼠标点击事件$(\"div\").animate({//动画left:\'250px\',//距离左边250像素点opacity:\'0.5\',//透明度为0.5height:\'150px\',//设置大小width:\'150px\'});});});</script>

jQuery的动画效果