jQuery 动画

动画

show/hide/toggle

show([s,[e],[fn]])

width + height + opacity

不传参: 没有动画效果

传参:

时间: 以ms为单位

运动曲线: 'swing' 'linear'

回调函数: 在动画执行完成后还要执行的操作

$('button').eq(0).click(function () {
    // $('div').show();
    // $('div').show(3000);
    $('div').eq(0).show(3000, 'swing', function () {
        console.log('结束');
    });
    // $('div').eq(1).show(3000, 'linear');
});
​
$('button').eq(1).click(function () {
    // $('div').hide();
    // $('div').hide(3000);
    $('div').hide(3000, function () {
        console.log('结束');
    });
});
​
$('button').eq(2).click(function () {
    // $('div').toggle();
    // $('div').toggle(3000);
    $('div').toggle(3000, function () {
        console.log('结束');
    });
});

slideDown/slideUp/slideToggle

slideDown([s,[e],[fn]])

height

不传参: 有动画效果 400ms

$('button').eq(0).click(function () {
    // $('div').slideDown();
    // $('div').slideDown(3000);
    // $('div').slideDown(3000, 'linear');
    $('div').slideDown(3000, 'linear', function () {
        console.log('结束了');
    });
});
​
$('button').eq(1).click(function () {
    // $('div').slideUp();
    // $('div').slideUp(3000);
    // $('div').slideUp(3000, 'linear');
    $('div').slideUp(3000, 'linear', function () {
        console.log('结束了');
    });
});
​
$('button').eq(2).click(function () {
    // $('div').slideToggle();
    // $('div').slideToggle(1000);
    // $('div').slideToggle(1000, 'linear');
    $('div').slideToggle(1000, 'linear', function () {
        console.log('结束了');
    });
});

fadeIn/fadeOut/fadeToggle/fadeTo

fadeIn([s,[e],[fn]])

不传参: 有动画效果 400ms

fadeTo(s, to 透明度, e, fn)

$('button').eq(0).click(function () {
    // $('div').fadeIn();
    // $('div').fadeIn(3000);
    // $('div').fadeIn(3000, 'linear');
    $('div').fadeIn(3000, 'linear', function () {
        console.log('结束了');
    });
});
​
$('button').eq(1).click(function () {
    // $('div').fadeOut();
    // $('div').fadeOut(1000);
    // $('div').fadeOut(1000, 'linear');
    $('div').fadeOut(1000, 'linear', function () {
        console.log('结束了');
    });
});
​
$('button').eq(2).click(function () {
    // $('div').fadeToggle();
    // $('div').fadeToggle(1000);
    // $('div').fadeToggle(1000, 'linear');
    $('div').fadeToggle(1000, 'linear', function () {
        console.log('结束了');
    });
});
​
$('button').eq(3).click(function () {
    $('div').fadeTo(400, 0.5);
});

自定义动画

语法一

jq对象.animate({动画参数}, duration, easing, callback)

动画参数: 对象 {width: 300px, height: 500px}

duration: 时长 400ms ms为单位

easing: linear swing

callback: 回调函数 动画完成以后

背景色无法通过jq动画方式实现效果

$('div').click(function () {
    $('div').animate({
        opacity: 0.5,
        width: 500,
        height: 500,
        background: 'black'
        // height: 'toggle'
        // height: 'hide'
    }, 3000, 'linear', function () {
        console.log('结束');
    });
​
});

语法二

jq对象.animate({动画参数}, {options});

动画参数: 对象 {width: 300px, height: 500px}

options: {

duration: 动画时间,

easing: 运动曲线,

complete: 动画完成后执行的回调函数,

step: 动画每一步执行后的回调函数,

queue: 动画是否进入队列, true--队列中排队 默认值 false--跟随第一个动画一起执行

}

$('div').click(function () {
    $('div').animate({
        width: 500,
        height: 500
    }, {
        duration: 3000,
        easing: 'linear',
        complete: function () {
            console.log('结束');
        },
        step: function () {
            // console.log($(this).width());
        },
        queue: true
    }).animate({
        opacity: 0.3
    }, {
        queue: false,
        duration: 3000
    });
});

动画注意

\1. 动画可以连缀 在连缀的过程中没有特殊设置 默认是进行队列执行

$('div').click(function () {
    $('div').animate({
        left: 500
    }, 1000).animate({
        top: 500
    }, 1000).animate({
        top: 0,
        left: 0
    }, 1000);
});

\2. .css所设置的样式 不会进入动画队列 会跟随第一个动画 在第一时间执行

$('div').click(function () {
    $('div').animate({
        left: 500
    }, 1000).animate({
        top: 500
    }, 1000)
    .css({
        background: 'pink',
        left: '1000px',
        width: 500
    })
    .animate({
        top: 0,
        left: 0
    }, 1000);
});

\3. .queue方法实现插队

jq对象.queue(函数); 函数中写要放进去的代码 函数有一个形参 这个形参是个函数

.queue后面的动画 都不在执行

$('div').click(function () {
    $('div').animate({
            left: 500
        }, 1000).animate({
            top: 500
        }, 1000)
        .queue(function (next) {
            $('div').css({
                background: 'pink',
                // left: '1000px',
                // width: 500
            });
            console.log(next);
            next();
        }).animate({
            top: 0,
            left: 0
        }, 1000);
});

停止动画

jq对象.stop(clearQueue, gotoEnd);

clearQueue: true: 后续的队列中等待执行的动画被清除 false(默认): 执行下一个队列的动画

gotoEnd: true: 当前动画被停止的一瞬间到达目标值 false(默认): 在哪里停止就留在哪个尺寸

finish: 1.8+

jq对象.finish();

将所有的动画一瞬间到达目标值

$('button').eq(1).click(function () {
    // $('div').stop(false, false);
    // $('div').stop(true, false);
    // $('div').stop(true, true);

    $('div').finish();
});

is

is(":animated"):判断是否处于动画中 true--正在动画 false--没有动画

$('div').click(function () {
    console.log(1);
    // 如果当前元素已经在动画中 不允许添加动画
    if(!$('div').is(':animated')){
        console.log(2);
        $('div').animate({
            width: 'toggle',
            height: 'toggle'
        }, {
            duration: 1000,
            step: function () {
                // 判断是否处于动画中 true--正在动画 false--没有动画
                // console.log($('div').is(':animated'));
            },
            complete:function(){
                // console.log($('div').is(':animated'), 'complete');
            }
        });
    }
});

循环

each: 返回原数据

jq对象.each(函数)

$.each(数据, 函数)

map: 返回函数中设置的返回值组成的新数组

jq对象.map(函数)

$.map(数据, 函数)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// $(arr).each(function (i, v) {
//     console.log(i, v);
// });

// var res = $.each(arr, function (i, v ) {
//     /* 
//         第一个参数: 下标
//         第二个参数: 值
//     */
//    console.log(i, v);
// });
// console.log(res);

var res = $.map(arr, function (v, i ) {
    /* 
        第一个参数: 值
        第二个参数: 下标
    */
   console.log(i, v);
   return v * v;
});
console.log(res);

var obj = {
    name: '迪丽热巴',
    age: 33,
    height: 178
}
// var res = $.each(obj, function (key, val) {
//     console.log(key, val);
// });
// console.log(res);

var res = $.map(obj, function (val, key) {
    console.log(key, val);
    return val;
});
console.log(res);

// var res = $.each($('li'), function (i, ele) {
//     console.log(i, ele);
// });
// console.log(res);

var res = $.map($('li'), function (ele, i) {
    console.log(i, ele);
    return $(ele).html();
});
console.log(res);

extend

$.extend([deep], dist, ....data);

返回拷贝以后的完整数据

deep: 是否进行深拷贝 false/不传: 浅拷贝 true: 深拷贝

浅拷贝: 只对比第一层级的属性名是否相同 如果相同 用后面的覆盖前面的

如果不同 就复制进来

深拷贝: 第一个参数设置成true, 进行的是递归拷贝, 先比较第一册层级的属性名是否重复, 如果重复, 判断属性值是否两边都是object/array, 保证两边数据类型是一样的, 如果不一样直接用后面的覆盖前面的, 如果属性名一样属性值都是object或者都是array, 比较子属性

dist: 默认的目标源 其他数据拷贝到这里

var obj = {
    name: '张三',
    age: 22,
    money: ['电影', '饺子馆', '茶叶蛋', '慈善'],
    gf: {
        name: '迪丽热巴',
        age: 18,
        money: ['衣服', '化妆', '珠宝']
    }
};

var obj1 = {
    name: '李四',
    gf: {
        name: '古力娜扎',
        height: 168,
        money: ['唱歌', "表演", '衣服', '火锅']
    }
}

var obj2 = {
    hobby: {
        h1: '骑马',
        h2: '唱歌'
    }
};

// var res = $.extend(false, obj, obj1, obj2);
// console.log(res);


var res = $.extend(true, obj, obj1, obj2);
console.log(res);