显示、隐藏动画
- 显示动画
- 内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;
// 编写jQuery相关代码
$("button").eq(0).click(function () {
// $("div").css("display", "block");
// 注意: 这里的时间是毫秒
$("div").show(1000, function () {
// 作用: 动画执行完毕之后调用
alert("显示动画执行完毕");
});
});
- 隐藏动画
$("button").eq(1).click(function () {
// $("div").css("display", "none");
$("div").hide(1000, function () {
alert("隐藏动画执行完毕");
});
});
- 切换动画(显示变隐藏,隐藏变显示)
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
alert("切换动画执行完毕");
});
});
- 注意事项:
- show(1000, function () {};) 第一个参数单位是毫秒, 1000毫秒等于1秒
- 默认的动画时长是400毫秒
- 除了指定毫秒以外还可以指定三个预设参数 slow、normal、fast
- slow本质是600毫秒
- normal本质是400毫秒
- fast本质是200毫秒
- 其它两个方法同理可证
展开、收起动画
- 参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已
- slideDown([s],[e],[fn])
- 展开动画
$("button").eq(0).click(function () {
$("div").slideDown(1000, function () {
alert("展开完毕");
});
});
- 收起动画
$("button").eq(1).click(function () {
$("div").slideUp(1000, function () {
alert("收起完毕");
});
});
- 切换动画(展开变收起,收起变展开)
$("button").eq(2).click(function () {
$("div").slideToggle(1000, function () {
alert("收起完毕");
});
});
淡入、淡出动画
- 参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已
- fadeIn([s],[e],[fn])
- 淡入动画
$("button").eq(0).click(function () {
$("div").fadeIn(1000, function () {
alert("淡入完毕");
});
});
- 淡出动画
$("button").eq(1).click(function () {
$("div").fadeOut(1000, function () {
alert("淡出完毕");
});
});
- 切换动画(显示变淡出,不显示变淡入)
$("button").eq(2).click(function () {
$("div").fadeToggle(1000, function () {
alert("切换完毕");
});
});
- 淡入到指定透明度动画
- 可以通过第二个参数,淡入到指定的透明度(取值范围0~1)
$("button").eq(3).click(function () {
$("div").fadeTo(1000, 0.2, function () {
alert("淡入完毕");
})
});
自定义动画
有时候jQuery中提供的集中简单的固定动画无法满足我们的需求, 所以jQuery还提供了一个自定义动画方法来满足我们复杂多变的需求
/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
marginLeft: 500
}, 5000, "linear", function () {
// alert("自定义动画执行完毕");
});
- 每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画
$("button").eq(1).click(function () {
$(".one").animate({
width: "+=100"
}, 1000, function () {
alert("自定义动画执行完毕");
});
});
- 同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画
$(".one").animate({
width: 500,
height: 500
}, 1000, function () {
alert("自定义动画执行完毕");
});
动画队列
- 多个动画方法链式编程,会等到前面的动画执行完毕再依次执行后续动画
$("div").slideDown(1000).slideUp(1000).show(1000);
$(".one").slideDown(1000,function () {
$(".one").slideUp(1000, function () {
$(".one").show(1000);
});
});
- 但是如果后面紧跟一个非动画方法则会被立即执行
// 立刻变为黄色,然后再执行动画
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");
- 如果想颜色再动画执行完毕之后设置, 1.使用回调 2.使用动画队列
$(".one").slideDown(1000,function () {
$(".one").slideUp(1000, function () {
$(".one").show(1000, function () {
$(".one").css("background", "yellow")
});
});
});
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
$(".one").css("background", "yellow")
});
- 注意点:
- 动画队列方法queue()后面不能继续直接添加queue()
- 如果想继续添加必须在上一个queue()方法中next()方法
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
$(".one").css("background", "yellow");
next(); // 关键点
}).queue(function () {
$(".one").css("width", "500px")
});
动画相关方法
-
delay(d,[q])
- 设置动画延迟时长
$(".one").animate({
width: 500
// height: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
-
- 停止指定元素上正在执行的动画
// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);
// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);
// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);
// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
