<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid red;
display: none;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
/*
//------------------从上往下的方式默认600毫秒--------------------------
//通过从上往下滑动方式显示 display none的dom元素。
//第一个参数动画时间,第二个参数可以调用回调函数执行完动画效果后调用
$("#hidden").click(function() {
$("div").slideDown(3000, function() {
alert("我已经完全显示")
});
});
$("#show").click(function() {
$("div").slideDown(3000, function() {
alert("我已经完全隐藏");
});
});
//显示就隐藏,隐藏就显示一个按钮包含前边两个按钮的效果
$("#hs").click(function() {
$("div").slideToggle(3000, function() {
alert("我已经完全显示/隐藏");
});
}); */
//------------------缩放的方式默认600毫秒--------------------------
//显示
/* $("#hidden").click(function() {
$("div").show(3000, function() {
alert("我已经完全显示")
});
});
//隐藏
$("#show").click(function() {
$("div").hide(3000, function() {
alert("我已经完全显示")
});
});
//显示或隐藏
$("#hs").click(function() {
$("div").toggle(3000, function() {
alert("我已经完全显示/隐藏");
});
}); */
//------------------淡入淡出--------------------------
//通过修改透明度来显示(0~1)
$("#hidden").click(function() {
$("div").fadeIn(3000, function() {
alert("我已经完全显示")
});
});
//通过修改透明度隐藏
$("#show").click(function() {
$("div").fadeOut(1000, function() {
alert("我已经完全显示")
});
});
//显示到指定透明度
$("#halfshow").click(function() {
$("div").fadeTo(1000,0.5, function() {
alert("半透显示")
});
});
//显示或隐藏
$("#hs").click(function() {
$("div").fadeToggle(1000, function() {
alert("我已经完全显示/隐藏");
});
});
});
</script>
</head>
<body>
<div>段落文字</div>
<input type="button" id="hidden" value="显示" />
<input type="button" id="show" value="隐藏" />
<input type="button" id="halfshow" value="半显示" />
<input type="button" id="hs" value="显示/隐藏" />
</body>
</html>
Jquery标签动画效果
最新推荐文章于 2021-11-27 12:17:12 发布