jQuery第三次课

一 基本效果

1. show([s,[e],[fn]]) ：显示；
   hide([s,[e],[fn]]) ：隐藏；
   toggle([s],[e],[fn]) ：显示隐藏切换，可以实现上述两个功能；
   不带参数时， 直接显示隐藏；带参数时可以带： speed 、easing 、 fn。（不建议带参数），fn 指的是：动画完成之后的执行函数；
2. 滑动：
   slideDown([s],[e],[fn])：向下滑动；
   slideUp([s,[e],[fn]])：向上滑动；
   slideToggle([s],[e],[fn])：可以实现上述两种功能；
3. 淡入淡出：
   fadeIn([s],[e],[fn]) ： 淡入；
   fadeOut([s],[e],[fn])： 淡出；
   fadeToggle([s,[e],[fn]])：可以实现上述两种功能；
   fadeTo([[s],o,[e],[fn]]) ： 透明度的动画；
4. 自定义动画：
   animate(p,[s],[e],[fn])1.8* ：里面参数分别为： params 属性 、 speed、 easing、 fn；
   stop([c],[j])1.7* ：停止当前正在执行的动画；
   delay(d,[q]) ：延迟后续动画的执行；
   finish([queue])1.9+ :停止所有的动画；

二 简单案例的实现

实现一个动画开始、停止、完成时的案例。

$(function () {
        //声明变量控制奇偶
        var count = 0;
        $(".btns").click(function () {
            addanimate();
        });
        function addanimate() {
            $("li").each(function (index) {
                var delaytime = index * 100;
                $(this).delay(delaytime).animate({
                    width: count % 2 == 0 ? 200 : 100
                }, 1000);
            }).last().queue(function () {
                //当前最后一个元素动画的队列执行完成之后执行的回调函数
                count++;
                $(this).dequeue();//删除当前元素最前端的队列函数
                addanimate();
            });
        }

        $(".btnp").click(function () {
            $("li").stop();
        });
        $(".btnf").click(function () {
            $("li").finish();
        });
    });

执行效果图为：