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