jQuery动画

1、jQuery预制动画

1、显示隐藏

宽、高、透明度同时改变

通常情况下，仅仅就是实现显示隐藏的效果。替换css的display显示和隐藏

• jQuery对象.show(speed, easing, callback); 显示
• jQuery对象.hide(speed, easing, callback); 隐藏
• jQuery对象.toggle(speed, easing, callback); 开关效果

参数可选

• speed(速度)(默认为0)：number 、fast(200ms)、normal(400ms)、slow(600ms)。
• easing(运动的形式)："swing"慢快慢(默认) "linear"匀速
• callback(回调函数)

2、淡入淡出

透明度的改变

• jQuery对象.fadeIn(speed, callback) 显示
• jQuery对象.fadeOut(speed, callback) 隐藏
• jQuery对象.fadeTo(speed, opacity, callback) 透明到多少
• jQuery对象.fadeToggle(speed, callback) 如果显示的，则隐藏，如果是隐藏的，则显示

参数可选

• speed(速度)(默认为400)：number 、fast(200ms)、normal(400ms)、slow(600ms)
• callback(回调函数)

3、滑入滑出

高度的改变

• jQuery对象.slideDown(speed, callback); 显示
• jQuery对象.slideUp(speed, callback); 隐藏
• jQuery对象.slideToggle(speed, callback); 如果是显示的，则隐藏，如果是隐藏的，则显示

参数可选

• speed(速度)(默认为400)：number 、fast(200ms)、normal(400ms)、slow(600ms)
• callback(回调函数)

2、自定义运动

1、方式一

语法格式一
jQuery对象.animate({styles}, speed, easing, callback);
        styles : 必需。规定产生动画效果的一个或多个css属性/值。 {width: 300, height:300}
        speed : 时间(默认:400)
        easing : 运动形式，(swing(慢快慢 默认) linear(匀速) )
        callback : 回调函数

var box = $('#box');

// 1、普通使用
box.click(function () {
    box.animate({
        width: 300
    }, 3000, 'linear', function () {
        console.log('我运动完成了');
    })
});

// 2、递增递减
box.click(function () {
    box.animate({
        left: '+=50'
    })
});

// 3、同时运动多个属性
box.click(function () {
    box.animate({
        width: 500,
        height: 500,
        left: 300,
        top: 200,
        opacity: 0.3
    }, 3000)
});


// 4、链式运动
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .animate({ height: 300 }, 3000)
        .animate({ left: 300 }, 3000)
        .animate({ top: 300 }, 3000)
        .animate({ opacity: 0.5 }, 3000);
});

动画队列

var box = $('#box');

// 需求：先让宽到500，再改变背景颜色为黄色，再让高到500

// 不行
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .css('background', 'yellow') // 因为css不是运动，所以不能加入动画队列
        .animate({ height: 500 }, 3000)
});


// 回调
box.click(function () {
    box
        .animate({ width: 500 }, 3000, function () {
            $(this).css('background', 'yellow');
        })
        .animate({ height: 500 }, 3000)
});

// ---------------------------
// 将css加入到动画队列
// jQuery对象.queue(函数); 将函数加入到元素的动画队列，函数中的this是这个元素，它有一个参数next，即后面要执行的队列
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .queue(function (next) {
            $(this).css('background', 'yellow');
            next(); // next代表后续的运动，要调用一下
        })
        .animate({ height: 500 }, 3000)
});

2、方式二

语法格式二
jQuery对象.animate({ styles }, { options });

styles : 必需。规定产生动画效果的一个或多个css属性/值。 {width: 300, height:300}
options: 可选，规定动画的额外选项
        duration: 设置动画的速度
        easing: 运动的形式，规定要使用的 easing 函数
        complete: 规定动画完成之后要执行的函数
        step: 规定动画的每一步完成之后要执行的函数，该函数的第二个参数下有一个pos属性，即运动的百分比
        queue: 布尔值。是否将这个animate加入到动画队列，默认加入

var box = $('#box');

box.click(function () {
    box
        .animate({
            width: 300
        }, {
            duration: 3000,
            easing: 'linear',
            complete: function () {
                console.log('我运动完成了');
            },

            // 运动每执行一步，要调用的函数
            step: function (now, obj) {
                // console.log(now); // 每一步运动到的位置
                console.log(obj.pos); // 运动的百分比
            },
            queue: false // 是否加入动画队列，默认加入
        })
        .animate({ height: 300 }, 3000)
});

3、运动其它

1、停止运动

jQuery对象.stop(clearQueue, gotoEnd);
        clearQueue：代表是否要清空未执行完的动画队列，默认 false
        gotoEnd：代表是否直接将正在执行的动画跳转到末状态，默认 false

jQuery对象.finish(); // 所有运动立即到终点

// 停止
btn.click(function () {
    // box.stop(); // 停止当前，后续的继续执行
    // box.stop(true); // 停止当前，后续的清除
    // box.stop(true, true); // 当前到未状态，后续的清除

    box.finish(); // 所有运动立即到终点
});

2、延迟运动

// jQuery对象.delay(时间);

var box = $('#box');
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .delay(3000) // 暂时3s再执行
        .animate({ height: 500 }, 3000);
})

4、$下的方法

1、$.each

• $.each(对象, function (index, item) { }); 循环对象(jq对象、[]、{})

注意：jQuery对象.each()只能循环jQuery对象

// 循环jQuery对象
$.each($('li'), function (index, item) {
    // console.log(index, item);
    // console.log(item === this);
    $(this).text(index);
});


// ---------------------------------------
// 循环数组
var arr = ['刘备', '关羽', '张飞'];
$.each(arr, function (index, item) {
    console.log(index, item);
});

// ---------------------------------------
// 循环对象
var obj = {
    name: 'zs',
    age: 3,
    fn: function () {
        console.log('前端开发');
    }
}
$.each(obj, function (key, value) {
    console.log(key, value);
})

2、$.map

• $.map(function (value, key) { });
• 作用：循环对象，返回每次函数调用的结果组成的数组(如果调用的结果是null或undefined，则不添加进数组)
• 类似ES6 : Object.keys() Object.values()

var obj = {
    name: 'zs',
    age: 3,
    fn: function () {
        console.log('前端开发');
    }
}

var arr = $.map(obj, function (value, key) {
    // console.log(value, key);
    // return value;
    return key;
})

console.log(arr); // ['name', 'age', 'fn']

$.extend

• 语法：$.extend([deep], target, object1 [, objectN]);
• deep：即是否深度克隆 如true则深克隆。

1、对象合并

// 1、合并对象
// $.extend(target, object1, object2, ...); 对象都合并到target上
// 返回target
var obj1 = {
    name: 'zs'
}
var obj2 = {
    sex: '男'
}
var obj3 = {
    age: 2,
    name: 'ls'
}

// var o = {};
// $.extend(o, obj1, obj2, obj3);
// console.log(o); // {name: 'ls', sex: '男', age: 2}

// 推荐用法
var o = $.extend({}, obj1, obj2, obj3);
console.log(o); // {name: 'ls', sex: '男', age: 2}

2、对象浅克隆：只克隆了一层

// 浅克隆
var obj = {
    name: 'zs',
    age: 3
}

var o = $.extend({}, obj); // 浅克隆
o.sex = '男';
console.log(o);
console.log(obj);

3、深克隆

// 深克隆
var obj = {
    name: 'zs',
    fn: {
        a: '小王'
    }
}
// var o = $.extend({}, obj); // 浅克隆只能克隆一层，如果里面还有对象，则不克隆，只克隆引用。即将会导致一改全改
var o = $.extend(true, {}, obj); // 深克隆 利用递归调用
o.fn.a = '小张';
console.log(o);
console.log(obj);

总结：如果对象里面是基本类型，则可以用浅克隆。如果里面是引用类型，则必须用深克隆