jQuery中的预定义动画和自定义动画

// 动画： 在JS往往理解标签从显示到隐藏，或从隐藏到显示的过程。

1、JQ预定义动画

1） 没有动画效果   

     // $(".btn-enter").on("click",function(){

        //     $(".box").show();

        // })

        // $(".btn-leave").on("click",function(){

        //     $(".box").hide();

        // })

2）给show 或 hide 传递参数，毫秒值 / slow | fast   

    // 主要是控制标签的宽度 高度 透明度 最后dispay为none

        $(".btn-enter").on("click", function () {

            // $(".box").show(5000);

            // 动画结束就执行function

            $(".box").show(1000, function () {

                console.log("显示标签的动画完成")

            });

        })

        $(".btn-leave").on("click", function () {

            // $(".box").hide(1000);

            $(".box").hide("fast");

        })


        // 原状态是显示的，调用这个api就隐藏； 否则反之

        $(".btn-open-or-close").on("click", function () {

            $(".box").toggle(1000);

        })

3）给fadeIn 或 fadeOut 传递参数，毫秒值       

// 主要是控制标签的透明度 最后dispay为none

        $(".btn-fade-in").on("click", function () {

            // 显示

            $(".box").fadeIn(5000);

        })

        $(".btn-fade-out").on("click", function () {

            // 隐藏

            $(".box").fadeOut(5000);

        })

2、自定义动画

// CSS属性可以自定义的动画
        $(".btn-start").on("click",function(){
            // 执行动画
            $(".box").animate({
                marginLeft: 500,
                width: 200,
                height: 200,
                borderRadius: "50px"
            },3000)
        })


        $(".btn-restore").on("click",function(){
             // 执行动画
             $(".box").animate({
                marginLeft: 0,
                width: 100,
                height: 100,
                borderRadius: "0px"
            },1000)
        })


        $(".btn-stop").on("click",function(){
            // 停止动画
            $(".box").stop();
        })