显示、隐藏动画
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(""); } })