jQuery效果
jQuery 效果函数：
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用“自定义”的动画 |
| clearQueue() | 对被选元素移除所有排队的函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 运行被选元素的下一个排队函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| hide() | 隐藏被选的元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选的元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止在被选元素上运行动画 |
| toggle() | 对被选元素进行隐藏和显示的切换 |
一、基本效果
1-1：show()
以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅
show(speed, [easing], [callback]) speed: //(可选)String,Number 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing: //(可选)string (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" callback: // (可选)Function 在动画完成时执行的函数，每个元素执行一次。
1-2:hide()
以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。
hide(speed, [easing], [callback]) speed： //(可选)String,Number 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing: //(可选)string (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" callback: // (可选)Function 在动画完成时执行的函数，每个元素执行一次。
示例：
<div class="container">
<img src="../static/my_imgs/01.jpg" class="img-responsive" style="display: block">
<button class="showImg">显示</button>
<button class="hideImg">隐藏</button>
<button class="toggleBtn">切换按钮</button>
</div>
------------------------------------------js
$(function () {
$(".showImg").click(function () {
$("img").show(2000)
})
$(".hideImg").click(function () {
$("img").hide(2000)
})
$('.toggleBtn').click(function (vals) {
if ($('.img-responsive').css('display') == 'block') {
$("img").hide(2000)
$('.img-responsive').css({'display': 'none'})
} else {
$("img").show(2000)
$('.img-responsive').css({'display': 'block'})
}
})
})
二、滑动效果
2-1:slideUp()
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
slideUp([speed,[easing],[fn]]) speed:(可选)三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing:(可选) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:(可选)在动画完成时执行的函数，每个元素执行一次。
2-2:slideDown()
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
slideDown([speed],[easing],[fn]) speed:(可选) 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing:(可选) 用来指定切换效果，默认是"swing"，可用参数"linear" fn：(可选) 在动画完成时执行的函数，每个元素执行一次。
2-3:slideToggle()
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
slideToggle([speed],[easing],[fn]) speed:(可选) 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing:(可选) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:(可选) 在动画完成时执行的函数，每个元素执行一次。
示例：
<body>
<div class="container">
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<button class="btn3">Toggle</button>
</div>
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$("p").slideUp("slow", function () {
alert("Animation Done.");
});
});
$(".btn2").click(function () {
$("p").slideDown();
});
$(".btn3").click(function () {
$("p").slideToggle('slow',function () {
alert('滑动切换完成！')
});
});
})
</script>
</body>