2.19动画效果

jquery 基本效果

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

$(".btn").click(function(){
    $(".block").hide();
});

hide show不加参数直接隐藏 或者显示，参数是速度，不建议带speed 参数

  $(".btn").click(function () {
            count++;
            if (count % 2 == 0) {
               $(".block").show(1,function (){
                    console.log("动画完成");
                });
            }
            else {
                $(".block").hide(1,function (){
                    console.log("动画完成");
                });
            }
            
        });

显示隐藏切换，也可以用toggle实现

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

//滑动
//slideDown([s],[e],[fn])
//slideUp([s,[e],[fn]])
//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("动画完成");
            }

参数是速度，sideToggle 上滑下滑切换

淡入淡出

    //fadeIn([s],[e],[fn])   淡入
    //fadeOut([s],[e],[fn])  淡出
    //fadeTo([[s],o,[e],[fn]])  透明度的动画
    //fadeToggle([s,[e],[fn]])

$(".btn").click(function () {
            count++;
            if(count%2==0)
            {
               $(".block").fadeIn(2000,"linear",function (){
                   console.log("动画执行完成");
               });
            }
            else{
               $(".block").fadeOut(2000,"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");
            });

animate 添加自定义动画

   $(".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 是清除队列 和立即完成当前动画

$(".btnfis").click(function () {
            $(".block").finish();
        });

finish //清除队列 队列动画直接完成