JavaScript课程——Day22（jQuery预制动画自定义运动运动其他$下的方法数组方法）

Posted 2021-05-18 别动我咖喱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript课程——Day22（jQuery预制动画自定义运动运动其他$下的方法数组方法）相关的知识，希望对你有一定的参考价值。

1、jQuery预制动画

　　1.1、显示隐藏

　　宽、高、透明度同时改变

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

$(selector).show(speed, easing, callback);　　显示
$(selector).hide(speed, easing, callback);　　隐藏
$(selector).toggle(speed, easing, callback);　　判断，开关效果

　　参数可选

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

<body>
    <button>show</button>
    <button>hide</button>
    <button>toggle</button>

    <div id="box"></div>

    <script src="js/jquery.js"></script>
    <script>

        // $(selector).show(speed, easing, callback);
        // $(selector).hide(speed, easing, callback);
        // $(selector).toggle(speed, easing, callback);

        // easing(运动的形式):"swing"慢快慢(默认)   "linear"匀速
        var btn = $(\'button\');
        var box = $(\'#box\');

        btn.eq(0).click(function () {
            box.show(3000);
        });

        btn.eq(1).click(function () {
            box.hide(3000);
        });

        btn.eq(2).click(function () {
            box.toggle(3000);
        });
    </script>
</body>

2、淡入淡出

　　透明度的改变

$(selector).fadeIn(speed, callback);　　显示
$(selector).fadeOut(spedd, callback);　　隐藏
$(selector).fadeTo(speed, opacity, callback);　　透明到具体值
$(selector).fadeToggle(speed, callback);　　如果是显示的，则隐藏；如果是隐藏的，则显示

　　参数可选

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

<body>
    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>

    <div id="box"></div>

    <script src="js/jquery.js"></script>
    <script>
        // $(selector).fadeIn(speed, callback);
        // $(selector).fadeOut(speed, callback);
        // $(selector).fadeToggle(speed, opacity, callback);
        var btn = $(\'button\');
        var box = $(\'#box\');

        btn.eq(0).click(function () {
            box.fadeIn(3000);
        });

        btn.eq(1).click(function () {
            box.fadeOut(3000);
        });

        btn.eq(2).click(function () {
            box.fadeToggle(3000);
        });
    </script>
</body>

3、滑入滑出

　　高度的改变

$(selector).slideDown(speed, callback);　　显示
$(selector).slideUp(speed, callback);　　隐藏

　　参数可选

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

<body>
    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>

    <div id="box"></div>

    <script src="js/jquery.js"></script>
    <script>
        // #(selector).slideDown(speed, callback)
        var btn = $(\'button\');
        var box = $(\'#box\');

        btn.eq(0).click(function () {
            box.slideDown(3000);
        });

        btn.eq(1).click(function () {
            box.slideUp(3000);
        });

        btn.eq(2).click(function () {
            box.slideToggle(3000);
        });
    </script>

2、自定义运动

　　2.1、方式一

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

// 基本动画
box.click(function () {
    box.animate({
        left: 500
    }, 3000, \'linear\', function () {
        console.log(\'我到了\');
    })
});

// 累加累减
box.click(function () {
    box.animate({
        left: \'+=50\'
    })
});

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

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

// 动画队列
// 需求：元素宽运动到了 500 后，再把元素背景变成黄色，接着高再变为500

// 不可以
// box.click(function () {
//     box
//         .animate({ width: 500 }, 3000)
//         .css(\'background\', \'yellow\') // 没有加入到动画队列
//         .animate({ height: 500 }, 3000);
// });

// 解决方式，将它加入动画队列
box.click(function () {
    box
        .animate({ width: 500 }, 3000)
        // queue即将某个样式的改变，添加进动画队列。它接收一个函数做为参数。这个函数有一个next参数，即要执行的下一个动画。我们需要手动next()调用一下
        .queue(function (next) {
            $(this).css(\'background\', \'yellow\');
            next();
        })
        .animate({ height: 500 }, 3000);
});

　　2.2、方式二

语法格式二
$(selector).animate({ styles }, { options });

styles : 必需。规定产生动画效果的一个或多个css属性/值。 {width: 300, height:300}
options: 可选，规定动画的额外选项
        duration: 设置动画的速度
        easing: 运动的形式，规定要使用的 easing 函数
        complete: 规定动画完成之后要执行的函数
        step: 规定动画的每一步完成之后要执行的函数
        queue: 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。

box.click(function () {
    box
        .animate({
            width: 500
        }, {
            duration: 3000,
            easing: \'linear\',
            complete: function () {
                console.log(\'我执行完了\');
            },

            // 只有需要用到精确控制每一步和是否加入动画时，才需要用到这个方法
            step: function (now, obj) {
                console.log(obj.pos); // 运动的百分比
            },
            queue: true // 是否将这个animate加入到动画队列
        })
        .animate({ height: 500 }, 3000)
});

3、运动其他

　　3.1、停止运动

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

$(selector).finish(); // 所有运动立即到终点

// 停止
$(\'button\').click(function () {
    // box.stop(); // 停止当前运动，后续运动继续
    // box.stop(true); // 停止当前的运动，后续的运动也清除
    // box.stop(true, true); // 当前运动立即到终点，后续运动清除

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

　　3.2、延迟运动

// $(selector).delay(时间);

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

4、$下的方法

　　4.1、$.each

$.each(对象, function(index, item){ });　　循环数组、对象和jQuery对象

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

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

// ----------------
// 循环数组
var arr = [11, 22, 33];
$.each(arr, function (index, item) {
    console.log(index, item);
})

// ---------------
// 循环对象
var obj = {
    name: \'zs\',
    age: 3,
    sex: \'男\'
}
$.each(obj, function (key, value) {
    console.log(key, value);
})

　　4.2、$.map

$.map(对象, function(value, key){ });　　循环对象，返回每个函数调用组成的一个数组

var obj = {
    name: \'zs\',
    age: 3,
    sex: \'男\'
}

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

　　4.3、$.extend

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

　　　　4.3.1、对象合并

var o1 = {
    name: \'zs\'
}
var o2 = {
    age: 3
}
var o3 = {
    name: \'ls\',
    sex: \'男\'
}

var obj = {};
$.extend(obj, o1, o2, o3); // o1 o2 o3合并到obj上面
console.log(obj); // {name: "ls", age: 3, sex: "男"}

// 推荐做法
var obj = $.extend({}, o1, o2, o3);
console.log(obj); // {name: "ls", age: 3, sex: "男"}

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

var obj = {
    name: "ls",
    age: 3,
    sex: "男"
};

var o = obj; // 不行
console.log(o);

var o = $.extend({}, obj); // 浅克隆
o.name = \'小王\';
console.log(o);
console.log(obj);

　　　　4.3.3、深克隆

var obj = {
    name: {
        a: \'小二\'
    },
    age: 3,
    sex: "男"
};
var o = $.extend(true, {}, obj); // 深克隆
o.name.a = \'小张\';
console.log(o);
console.log(obj);

5、数组方法

数组.find(function(item, index, array){ });
作用：函数返回真值时，就把返回真值这项对应的item返回出去，如果没有返回真值，则最终返回undifined

var v = arr.find(function (item, index, array) {
    // console.log(item, index, array);
    return item === 3;
})
console.log(v);

数组.findIndex(function(item, index, array){ });
作用：函数返回真值时，就把返回真值这项对应的下标返回出去，如果没有返回真值，则最终返回-1

var v = arr.findIndex(function (item) {
    return item === \'3\';
});
console.log(v);

以上是关于JavaScript课程——Day22（jQuery预制动画自定义运动运动其他$下的方法数组方法）的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript课程——Day23（插件Zepto）

重修课程day22（面向对象三之继承和派生）

重修课程day56（Bootstrap之javascript组件）

JavaScript课程——Day16（扩展原型上的方法继承）

JavaScript课程——Day20（jQuery：使用选择器节点遍历操作其他属性操作）

2018-5-22-Python全栈开发day9-Python开发课程简介part2