路漫漫其修远兮：js的成长经历（十三）——jQuery动画，案例_js引入jquery的动画效果代码案例-优快云博客

本文深入探讨了jQuery中动画的基本概念，包括显示、隐藏、展开、收起、淡入、淡出等动画类型，以及自定义动画和动画队列的使用方法。并通过新浪微博的实例，展示了如何运用jQuery实现动态网页交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示、隐藏动画

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("");
	}
	
	

})