1，show()方法和hide()方法
(1)，show()方法和hide()方法的基本操作
使用如下代码隐藏element元素
$("element").hide();这段代码与css()方法设置display属性效果相同
$("element").css("display","none");当把元素隐藏后，可以使用show()方法将元素的display样式设置为“block”，“inline” 或者其他的非“none”值。
(2)，show()方法和hide()方法让元素动起来。
可以填加参数”slow”,”normal”,”fast”
示例代码如下：
$("element").show("slow");其中”slow”使元素在600毫秒后显示，”normal”使元素在400毫秒后显示，”fast”使元素在200毫秒后显示。
当然了也可以自己定义时间，示例带入如下：
$("element").show(1000); //1000毫秒hide()方法与show()方法是一致的。
2, fadeIn()方法和fadeOut()方法实现淡入淡出
与show()方法不同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在一定时期内降低元素的透明度，直到元素完全消失。fadeIn() 方法则完全相反。
3，slideUp()方法 和slideDown()方法
slideUp()方法和slideDown()方法只会改变元素的高度，如果一个元素的display属性值为”none” ，当调用slideDown()方法时，这个元素将由上向下延伸显示。slideUp()方法正好相反。元素将由下到上缩短隐藏。
4, 自定义动画animate()
animate() 方法语法格式如下：
animate(params,speed,callback);参数说明如下：
(1)params：一个包含样式属性及值的映射，比如
{"property1":"value1","property2":"value2"...};
(2)speed:速度参数，可选
(3)callback:在动画完成时执行的函数，可选。
一个简单的动画，示例代码如下：
styles.css
#panel{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}test.html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type ="text/javascript">
$(document).ready(function(){
$("#panel").click(function(){
$(this).animate({"left":"500px"},3000);
});
});
</script>
</head>
<body>
<div id ="panel"></div>
</body>
</html>演示效果如下：
累加，累减动画，核心代码如下：
$(document).ready(function(){
$("#panel").click(function(){
$(this).animate({"left":"+=100px"},1000);
});
});演示效果如下：
如果有多个动画的时候可以需要按顺序执行相关动画，下面举一个例子，核心代码如下：
$(document).ready(function(){
$("#panel").click(function(){
$(this).animate({"left":"500px"},3000)
.animate({"height":"300px","width":"300px"},3000);
});
});演示效果如下：
原文地址：http://blog.csdn.net/hanhailong18/article/details/46559855
