jQuery-动画效果

基本效果

基本

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

    不带参数 直接显示隐藏
    带参数   speed   easing   fn

    不建议带speed  easing
     fn  指动画完成之后

var count = 0;
        $(".btn").click(function () {
            count++;
            if (count % 2 == 0) {
               $(".block").show(1,function (){
                   console.log("动画完成");
               });
            }
            else {
               $(".block").hide(1,function (){
                   console.log("动画完成");
               });
            }
            $(".block").toggle();  参数也是   speed  easing  fn
        });
    });

滑动

    slideDown([s],[e],[fn]) 以滑动方式显示隐藏的 <p> 元素：
    
    slideUp([s,[e],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
    speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
	easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
	
    slideToggle([s],[e],[fn]) 缓慢的将段落滑上或滑下

var count=0;
        $(".btn").click(function () {
            count++;
            if(count%2==0)
            {
               $(".block").slideDown(1000,"linear",function (){
                   console.log("动画完成");
               });
            }
            else{
               $(".block").slideUp(1000,"linear",function (){
                   console.log("动画完成");
               });
            }
            $(".block").slideToggle(2000, "linear", function () {
                console.log("动画完成");
            });

        });

淡入淡出

    fadeIn([s],[e],[fn])   淡入
    fadeOut([s],[e],[fn])  淡出
    fadeTo([[s],o,[e],[fn]])  透明度的动画
    fadeToggle([s,[e],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
	这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

var count=0;
        $(".btn").click(function () {
            count++;
            if(count%2==0)
            {
               $(".block").fadeIn(2000,"linear",function (){
                   console.log("动画执行完成");
               });
            }
            else{
               $(".block").fadeOut(2000,"linear",function (){
                   console.log("动画执行完成");
               })
            }

            $(".block").fadeToggle(2000, "linear", function () {
               console.log("动画执行完成");
            });

            //透明度的动画
            $(".block").fadeTo(1000,0.5,"linear",function (){
                console.log("动画完成");
            });
        });

自定义动画

	animate(p,[s],[e],[fn])1.8*   params 属性  speed  easing fn
    stop([c],[j])1.7*   停止当前正在执行的动画
    delay(d,[q]) 延迟后续动画的执行
    finish([queue])1.9+

$(".btnstart").click(function () {
            添加自定义动画
            $(".block").delay(1000).animate({
                marginLeft: 300,
                opacity: 0.3
            }, 2000, "linear", function () {
                console.log("动画完成1");
            }).animate({
                marginTop: 300,
                opacity: 1
            }, 2000, "linear", function () {
                console.log("动画完成2");
            }).delay(1000).animate({
                marginLeft: 0,
                opacity: 0
            }, 2000, "linear", function () {
                console.log("动画完成3");
            }).animate({
                marginTop: 0,
                opacity: 1
            }, 2000, "linear", function () {
                console.log("动画完成4");
            });
            queue(e,[q])  获取当前元素的动画队列
            console.log($(".block").queue().length);
        });
        点击停止当前元素正在执行的动画
        stop  是否清除队列   是否立即完成
        $(".btnstop").click(function () {
            $(".block").stop(true);
            写 false就是默认不带参数的效果
            写true  两个参数是  true false
            写true  true  是清除队列  和立即完成当前动画
        });
           finish  清除队列   队列动画直接完成
        $(".btnfis").click(function () {
            $(".block").finish();
        });
    });