从零玩转jQuery-动画效果

显示、隐藏动画

• show([s,[e],[fn]])

• 显示动画
• 内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;

// 编写jQuery相关代码
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 这里的时间是毫秒
    $("div").show(1000, function () {
        // 作用: 动画执行完毕之后调用
        alert("显示动画执行完毕");
    });
});

• hide([s,[e],[fn]])

• 隐藏动画

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隐藏动画执行完毕");
    });
});

• toggle([spe],[eas],[fn])

• 切换动画(显示变隐藏,隐藏变显示)

$("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("展开完毕");
    });
});

• slideUp([s,[e],[fn]])

• 收起动画

$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完毕");
    });
});

• slideToggle([s],[e],[fn])

• 切换动画(展开变收起,收起变展开)

$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完毕");
    });
});

淡入、淡出动画

• 参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已
• fadeIn([s],[e],[fn])

• 淡入动画

$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完毕");
    });
});

• fadeOut([s],[e],[fn])

• 淡出动画

$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完毕");
    });
});

• fadeToggle([s,[e],[fn]])

• 切换动画(显示变淡出,不显示变淡入)

$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切换完毕");
    });
});

• fadeTo([[s],o,[e],[fn]])

• 淡入到指定透明度动画
• 可以通过第二个参数,淡入到指定的透明度(取值范围0~1)

$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完毕");
    })
});

自定义动画

• 有时候jQuery中提供的集中简单的固定动画无法满足我们的需求, 所以jQuery还提供了一个自定义动画方法来满足我们复杂多变的需求

• animate(p,[s],[e],[fn])

/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是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);

• • stop([c],[j])
  • 停止指定元素上正在执行的动画

// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);

// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);

// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);

// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);