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(回调函数)
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);
});
语法格式二
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)
});
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(); // 所有运动立即到终点
});
// jQuery对象.delay(时间);
var box = $('#box');
box.click(function () {
box
.animate({ width: 500 }, 3000)
.delay(3000) // 暂时3s再执行
.animate({ height: 500 }, 3000);
})