JQuery课堂笔记（二）

一.jQuery动画的三种方式：

1.默认显示和隐藏方式

2.滑动显示和隐藏方式

3.淡入淡出显示和隐藏方式

1. 默认的显示和隐藏方式

(1) show([speed,[easing],[fn]])
如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

(2) hide([speed,[easing],[fn]])
隐藏,如果选择的元素是隐藏的，这个方法将不会改变任何东西。
(3) toggle([speed],[easing],[fn])
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

1. speed：动画的速度，可以自定义值(如：1000)毫秒数，它还有三个预定义的值(“slow”,“normal”, “fast”)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
     swing：动画执行时效果是 先慢，中间快，最后又慢
     linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。滑动显示和隐藏方式
2(1). slideDown([speed],[easing],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素。
2(2). slideUp([speed,[easing],[fn]])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素
2(3). slideToggle([speed],[easing],[fn])
与toggle功能相同，只是显示的动画效果不同

3.淡入淡出显示和隐藏方式
3(1). fadeIn([speed],[easing],[fn])
淡入效果（渐渐浮现）
3(2). fadeOut([speed],[easing],[fn])
淡出效果（渐渐隐藏）
3(3). fadeToggle([speed,[easing],[fn]])
与toggle功能相同，只是显示的动画效果不同

例如：

if ($("#content>ul>li").is(":hidden")) {
                        // 显示
                        $("#content>ul>li").fadeIn(500);
                        $(this).text("简化☚");
                        return false;
                    } else {
                        // 隐藏
                        $("#content>ul>li:gt(4)").not(":last").fadeOut(800);
                        $(this).text("更多");
                        return false;
                    }