<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../JQuery/jquery-1.8.0.min.js"></script>
<script src="JavaScript1.js"></script>
<style>
#content, #flipshow, #fliphide, #fliptoggle {
padding: 5px; /*边距*/
text-align: center; /*文字居中*/
background-color: #ffd800;
border: solid 1px #ff6a00; /*边框1px*/
}
#content {
padding: 50px; /*边距*/
display: none; /*内容隐藏*/
}
</style>
</head>
<body>
<!--淡入淡出-->
<button id="in">fadeIn</button>
<button id="out">fadeOut</button>
<button id="toggle">fadetoggle</button>
<button id="to">fadeto</button>
<div id="div1" style="width:80px;display:none; height:80px;background-color:aqua"></div>
<div id="div2" style="width: 80px; display: none; height: 80px; background-color: #b6ff00"></div>
<div id="div3" style="width: 80px; display: none; height: 80px; background-color: #0026ff"></div>
<!--滑动-->
<div id="flipshow">出现</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">隐藏显示</div>
<div id="content">Hello World</div>
<!--回调-->
<button id="btn1">隐藏</button>
<p>hello Worldhello Worldhello World</p>
</body>
</html>
JS文件：
$(document).ready(function () {
//显示隐藏
$("#in").on("click", function () {
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click", function () {
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click", function () {
//$("#div1").fadeToggle(1000);
//$("#div2").fadeToggle(1000);
//$("#div3").fadeToggle(1000);
console.log("D" + document);
console.log("D");
});
$("#to").on("click", function () {
$("#div1").fadeTo(1000,0.5);//第二个参数为透明度0-1
$("#div2").fadeTo(1000,0.7);
$("#div3").fadeTo(1000,0.3);
});
//滑动
$("#flipshow").click(function () {
$("#content").slideDown(1000);//隐藏到显示为1S
})
$("#fliphide").click(function () {
$("#content").slideUp(1000);//显示到隐藏为1S
})
$("#fliptoggle").click(function () {
$("#content").slideToggle(1000);//
})
//回调
$("#btn1").click(function () {
$("p").hide(1000, function () {
alert("动画结束方法被回调");
});
//执行多个动画
$("p").css("color", "red").slideUp(1000).slideDown(1000);
});
});
标签：jQuery,function,淡入淡出,隐藏,content,滑动,click,div1,1000 From： https://www.cnblogs.com/Mandy-ZQ-Ma/p/17375332.html