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('我运动完成了');
        console.log(this);
    });
});

// 2、递增
box.click(function () {
    box.animate({
        left: '+=50'
    }, 1000, 'linear', function () {
        console.log('我执行了');
    });
});

// 3、同时运动多个属性
box.click(function () {
    box.animate({
        width: 300,
        height: 400,
        left: 300,
        top: 200,
        opacity: 0.5
    }, 3000, function () {
        console.log('我运动完成了');
    })
});

// 4、链式运动。一个运动完成了，再做另一个
box.click(function () {
    box
        .animate({ width: 300 }, 3000)
        .animate({ height: 300 }, 3000)
        .animate({ left: 300 }, 3000)
        .animate({ top: 300 }, 3000)
        .animate({ opacity: 0.5 }, 3000);
});

动画队列

// 需求：元素宽运动到500之后，再将元素背景变为黄色，然后高再到500

var box = $('#box');

// 不能实现
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        .css('background-color', 'yellow') // css不是运动，它会立即执行
        .animate({ height: 500 }, 3000)
});

// .queue动画队列实现
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
    	// queue函数加入到动画队列中，然后调next，执行后续的运动
        .queue(function (next) {
            $(this).css('background-color', 'yellow');
            next(); // 执行运画队列以后的运动
        })
        .animate({ height: 500 }, 3000);
});

// 回调
box.click(function () {
    box
        .animate({ width: 500 }, 3000, function () {
            $(this).css('background-color', 'yellow') // css不是运动，它会立即执行
        })
        .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('我正在执行中');
            // console.log(arguments);
            // console.log(now); // 当前每一步运动到的值
            console.log(obj.pos); // 每一步运动的百分比
        },
        queue: false // 布尔值。是否将这个animate加入到动画队列
    })
    .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);
})