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);
