jQuery动画，案例

显示、隐藏动画

1.显示动画
show([s,[e],[fn]])
内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;

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

2.隐藏动画
hide([s,[e],[fn]])

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

3.切换动画(显示变隐藏,隐藏变显示)
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);

案例1——新浪微博

主要利用已有的图片素材，通过jQuery的事件监听，节点操作，来实现一个微博界面的发布，删除，点赞等功能，主要处理了排版的问题

实现代码

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新浪微博</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <link rel="stylesheet" type="text/css" href="./css/index.css"/>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="nav">
            <img src="images/nav.png" >
        </div>
        <div class="content">
            <img src="./images/left.png" class="left">
            <div class="center">
                <textarea class="comment">

                </textarea>
                <button class="send" disabled="disabled">发布</button>
                <!-- <input type="button" value="发布" class="send" disabled> -->
            </div>
            <img src="./images/right.png" class="right">
            <div class="messageList">
                <!-- 微博内容 -->
                <!-- <div class="info">
                    <p class="infoText">如果有一天我要去流浪</p>
                    <p class="infoOperation">
                        <span class="infoTime">2019-8-8-21:00</span>
                        <span class="infoHandle">
                            <a href="javascript:;">0</a>
                            <a href="javascript:;">0</a>
                            <a href="javascript:;">删除</a>
                        </span>
                    </p>
                </div> -->
            </div>
        </div>
        <div class="page">
            <a href="javascript:;">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
        </div>
        <script type="text/javascript">
            $(function() {


            }); 
        </script>

    </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 100%;
    background: url(../images/body_bg.jpg) no-repeat center 0;

}
.nav{
    width: 100%;
    height: 48px;
}
.nav img{
    width: 100%;
}
.content{
    width: 1000px;
    height: auto;
    background: lightsalmon;
    margin: 200px auto 0 auto;
    overflow: hidden;
}
.content .left{
    float: left;
    width: 150px;
}
.content .right{
    float: right;
    width: 240px;

}
.content .center{
    float: left;
    width: 600px;
    height: 168px;
    background: url(../images/comment.png) no-repeat 0 0;
    background-size: 600px 168px;

}
.center .comment{
    width: 580px;
    height: 73px;
    margin-left: 15px;
    margin-top: 45px;
    /* background: red; */
    resize: none;
    border: none;
    outline: none;
}
.center .send{
    width: 82px;
    height: 30px;
    margin-top: 4px;
    margin-left: 506px;
    border: none;
    background: #FD8040;
    color: white;
}
.content .messageList{
    width: 600px;
    /* height: auto; */
    background: white;
    float: left;
}
.messageList .info{
    padding: 10px 20px;
    border-bottom: 2px #CCCCCC solid;

}
.messageList .infoText{
    line-height: 25px;
    margin-bottom: 10px;
}
.info .infoOperation{
    width: 100%;
    overflow: hidden;
}
.infoOperation .infoTime{
    float: left;
    font-size: 13px;
    color: #CCCCCC;
}
.infoOperation .infoHandle{
    float: right;
    font-size: 13px;
}
.infoHandle a{
    text-decoration: none;
    color: #CCCCCC;
    background: url(../images/icons.png) no-repeat 0 0;
    padding-left: 25px;
    margin-left: 10px;
}
.infoHandle a:nth-child(2){
    background-position: 0 -17px;

}
.infoHandle a:nth-child(3){
    background-position: 0 -33px;

}
.page{
    width: 1000px;
    height: 40px;
    background: #9F5024;
    margin: 0 auto;
    text-align: right;
    padding: 10px;
    box-sizing: border-box;

}
.page a{
    text-decoration: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #CCCCCC;
    text-align: center;
    line-height: 20px;
    color: #2B2B2B;
}

JavaScript

$(function() {
    //0.监听内容的时时输入
    $("body").delegate(".comment", "propertychange input", function() {
        //判断是否输入了内容
        if ($(this).val().length > 0) {
            //让按钮可用
            $(".send").prop("disabled", false);
            console.log("按钮可用")
        } else {
            //让按钮不可用
            $(".send").prop("disabled", true);

        }
    })
    //1.监听发布按钮
    $(".send").click(function() {
        //拿到用户输入的内容
        var $text = $(".comment").val();
        //根据内容创建节点
        var $weibo = createEle($text);
        //插入微博
        $(".messageList").prepend($weibo);
    });
    //2.监听顶点击
    $("body").delegate(".infoTop","click",function(){
        $(this).text(parseInt($(this).text())+1);
    });
    $("body").delegate(".infoDown","click",function(){
        $(this).text(parseInt($(this).text())+1);
    });
    $("body").delegate(".infoDelete","click",function(){
        $(this).parents(".info").remove();
    });




    //创建节点的方法
    function createEle(text) {
        var $weibo = $("<div class=\"info\">\n" +
            "            <p class=\"infoText\">" + text + "</p>\n" +
            "            <p class=\"infoOperation\">\n" +
            "                <span class=\"infoTime\"> "+formartDate()+" </span>\n" +
            "                <span class=\"infoHandle\">\n" +
            "                    <a href=\"javascript:;\" class=\"infoTop\">0</a>\n" +
            "                    <a href=\"javascript:;\" class=\"infoDown\">0</a>\n" +
            "                    <a href=\"javascript:;\" class=\"infoDelete\">删除</a>\n" +
            "                </span>\n" +
            "            </p>\n" +
            "        </div>");
        return $weibo;
    };
    //生成时间的方法
    function formartDate(){
        var date=new Date();
        var time=[date.getFullYear()+"-",date.getMonth()+1+"-",
        date.getDate()+" ",
        date.getHours()+":",
        date.getMinutes()+":",
        date.getSeconds()]
        //数组转字符串
        return time.join("");
    }



})

实现效果