JQuery课堂笔记（二）

╰半夏微凉° 2023-10-07 20:25 3阅读 0赞

一.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;
                        }