显示、隐藏动画

· 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("切换动画执行完毕");

    });

});

· 注意事项:

o show(1000, function () {};) 第一个参数单位是毫秒, 1000毫秒等于1秒

o 默认的动画时长是400毫秒

o 除了指定毫秒以外还可以指定三个预设参数 slow、normal、fast

§ slow本质是600毫秒

§ normal本质是400毫秒

§ fast本质是200毫秒

o 其它两个方法同理可证

展开、收起动画

· 参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已

· 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")

});

· 注意点:

o 动画队列方法queue()后面不能继续直接添加queue()

o 如果想继续添加必须在上一个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])

o 设置动画延迟时长

$(".one").animate({

    width: 500

    // height: 500

}, 1000).delay(2000).animate({

    height: 500

}, 1000);

· 

o stop([c],[j])

o 停止指定元素上正在执行的动画

// 立即停止当前动画, 继续执行后续的动画

// $("div").stop();

// $("div").stop(false);

// $("div").stop(false, false);

// 立即停止当前和后续所有的动画

// $("div").stop(true);

// $("div").stop(true, false);

// 立即完成当前的, 继续执行后续动画

// $("div").stop(false, true);

// 立即完成当前的, 并且停止后续所有的

$("div").stop(true, true);

本文由职坐标整理发布，欢迎关注职坐标WEB前端jQuery频道，获取更多jQuery知识！