jquery之效果

1.基本效果

show([s,[e],[fn]]) 显示
hide([s,[e],[fn]]) 隐藏
toggle([s],[e],[fn]) 显示隐藏切换

参数 speed easing fn 不建议带前两个参数，fn参数指动画完成之后
三个参数都不带，直接隐藏，消失 带回调函数，能有一个动画效果

		var count=0;
        $(".btn").click(function () {
            // count++;
            // if(count%2==0){
            //     $(".block").show(function () {
            //         //动画完成之后出现  显示  汉字
            //         console.log("显示");
            //     });
            // }
            // else {
            //     $(".block").hide(function () {
            //         console.log("隐藏");
            //     });
            // }

            $(".block").toggle();
        })

2.滑动

slideDown([s],[e],[fn]) 下滑
slideUp([s,[e],[fn]]) 上滑
slideToggle([s],[e],[fn])
参数与show()相同,fn依旧是动画完成之后所执行的回调函数

		$(".btn").click(function () {
            //$(".block").slideToggle(2000,"linear")
            count++;
            if(count%2==0){
                $(".block").slideDown(2000,"linear",function () {
                    console.log("下滑（显示）");
                })
            }
            else{
                $(".block").slideUp(2000,"linear",function () {
                    console.log("上滑（隐藏）");
                });
            }
        })

3.淡入淡出

fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
fadeTo()动画只调整元素的不透明度，不会改变其他的

		$(".btn").click(function () {
            // count++;
            // if(count%2==0){
            //     $(".block").fadeIn(1000,"linear",function () {
            //         console.log("淡入（显示）");
            //     })
            // }
            // else {
            //     $(".block").fadeOut(1000,"linear",function () {
            //         console.log("淡出（隐藏）");
            //     })
            // }

            // $(".block").fadeToggle(1000,"linear",function () {
            //     console.log("完成");
            // })

            $(".block").fadeTo(1000,0.5,"linear",function () {
                console.log("1");
            })
        })

4.自定义

animate(p,[s],[e],[fn])1.8* params 属性 speed easing fn
stop([c],[j])1.7*
delay(d,[q])
finish([queue])1.9+
animate可以进行队列操作（即一个对象连点）
queue()表示当前对象的效果队列
dequeue()结束自定义函数，将队列继续执行下去

		$(".start").click(function () {
            $(".mydiv").animate({
                marginLeft:200
            },1000,"linear",function () {
                console.log("完成1");
            }).delay(1000).animate({
                marginTop:200
            },1000,"linear",function () {
                console.log("完成2");
            }).delay(1000).animate({
                marginLeft:0,
                opacity:0.1
            },1000,"linear",function () {
                console.log("完成3");
            }).animate({
                marginTop:0
            },1000,"linear",function () {
                console.log("完成4");
            });

            //动画队列
            console.log($(".mydiv").queue().length);   //6 因为有4个自定义动画，2个延迟
        });

stop() 相当于暂停
参数： 布尔值类型
false就是默认不带参数的效果
true 两个参数是 true false
参数true true 清除当前队列 立即完成当前动画

  $(".mydiv").stop(true,true);

finish（）直接完成 ，相当于stop(true,true) 但是finish()会直接将css属性变为最终值

 $(".mydiv").finish();