内置对象 和自定义对象

//.内置动画
//共同点:实现元素隐藏,和现实

    //2.具体的动画
    //show()  和  hide()
    //语法:show(speed,easing,fn);
    //参数介绍:
    // speed 表示速度的字符串 'slow' 'normal' 'fast' 或者 一个毫秒的时间
    //easing 表示切换效果,默认值'swing '或者'linear'
    //fn 表示动画完成后执行的一个函数

    //代码
    let btn1 = $('.btn1');
    let btn2 = $('.btn2');
    let div = $('div');
    //隐藏
    btn2.click(function () {
        //没有动画效果隐藏
        // div.hide();

        //带有动画效果的隐藏
        div.hide('fast', 'linear', function () {
            console.log(隐藏);
        });
    })

    //显示按钮
    btn1.click(function () {
        //没有动画效果显示
        // div.show();

        //有动画效果的显示
        div.show(2000, 'linear', function () {
            console.log(显示);
        })
    })

//.隐藏和显示

    //语法:
    //元素.slideUp  隐藏
    //元素.slideDown 显示
    //sped---->速度
    //easing--->切换效果 linear
    //fn    --->动画完成后执行的一个回调函数

    let btn1 = $('.btn1');
    let btn2 = $('.btn2');

    btn2.click(function () {
        div.slideUp('fast', 'linear', function () {

        })
    })
    btn1.click(function () {
        div.slideDown('fast', 'linear', function () {
            console.log(123);
        })
    })

//.jQ中自定义动画
//注意:JQ中的自定义动画不支持如下属性,与颜色相关的属性,旋转,位移,缩放…
//解决方案:
//用css代替
//网上找插件

    //.自定义动画语法:
    // 元素.animate(params,[speed],[easing],[fn])
    //参数介绍:
    // params,必须以键值对象的形式设置,设置动画中的属性
    //speed,表示动画的速度
    //easing,表示动画效果
    //fn,表示一个动画执行完成后执行的回调函数

    //代码
    let btn = $('input');
    let div = $('div');


    // btn.click(function () {
    //     div.animate({
    //         'width': '400px',

    //     }, 2000, 'linear', function () {
    //         console.log(123);
    //     })
    // })