这篇博客详细介绍了jQuery中用于元素显示与隐藏的各种方法，如hide()、show()、toggle()，以及淡入淡出（fadeIn(), fadeOut(), fadeToggle(), fadeTo()）和滑动效果（slideDown(), slideUp(), slideToggle()）。还讨论了animate()自定义动画方法，并提到了stop()用于停止动画的执行。"
138115327,23113335,Flutter与UniApp在Android购物商城App开发的应用解析,"['Flutter', 'Android开发', '商城App', 'UniApp开发']
jQuery hide()和show()
使用hide()和show()方法来隐藏和显示HTML元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide();
});
$("#show").click(function(){
$("div").show();
});
});
</script>
</head>
<body>
<div>点击隐藏/显示</div>
<button type="button" id="hide">隐藏</button>
<button type="button" id="show">显示</button>
</body>
</html>
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed 参数规定隐藏/显示的速度,可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").hide(1000);
});
$("button").click(function(){
$("div").show(1000);
});
});
</script>
</head>
<body>
<div>点击隐藏/显示</div>
<div>jquery 极客教程</div>
<button>显示/隐藏</button>
</body>
</html>
带有speed 参数的 hide() 方法,并使用回调函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").hide(1000,"linear",function(){
alert("hide()已完成!");
});
});
});
</script>
<style>
div{
width: 80px;
height: 80px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div>点击隐藏</div>
<div>jquery 极客教程</div>
<button>隐藏</button>
</body>
</html>
可以使用 toggle() 方法来切换 hide() 和 show() 方法
显示被隐藏的元素,并隐藏已显示的元素:
$(selector).toggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").toggle();
});
});
</script>
</head>
<body>
<div>点击隐藏/显示</div>
<div>jquery 极客教程</div>
<button>显示/隐藏</button>
</body>
</html>可选的 speed 参数规定隐藏/显示的速度,可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称
jQuery Fading 方法
jQuery 拥有四种 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(1000);
});
});
</script>
<style>
#div1{
background-color:red;
width: 150px;
height: 150px;
display: none;
}
#div2{
background-color:blue;
width: 150px;
height: 150px;
display: none;
}
#div3{
background-color:green;
width: 150px;
height: 150px;
display: none;
}
</style>
</head>
<body>
<button>点击淡入</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(1000);
});
});
</script>
<style>
#div1{
background-color:red;
width: 150px;
height: 150px;
}
#div2{
background-color:blue;
width: 150px;
height: 150px;
}
#div3{
background-color:green;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button>点击淡出</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(1000);
});
});
</script>
<style>
#div1{
background-color:red;
width: 150px;
height: 150px;
}
#div2{
background-color:blue;
width: 150px;
height: 150px;
}
#div3{
background-color:green;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button>点击淡入或淡出</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#div1").fadeTo("slow",0.25);
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.75);
});
});
</script>
<style>
#div1{
background-color:red;
width: 150px;
height: 150px;
}
#div2{
background-color:blue;
width: 150px;
height: 150px;
}
#div3{
background-color:green;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button>点击淡出</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长,它可以取以下值："slow"、"fast" 或毫秒
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)
可选的 callback 参数是该函数完成后所执行的函数名称
jQuery 滑动方法
可以在元素上创建滑动效果
jQuery 拥有以下滑动方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#up").click(function(){
$("#down").slideDown("slow");
});
});
</script>
<style>
#up
{
padding:5px;
text-align:center;
background-color:#f2f2f2;
border:solid 1px #c3c3c3;
}
#down
{
background-color: #C3C3C3;
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="up">滑动面板</div>
<div id="down">jquery</div>
</body>
</html>
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长,它可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是滑动完成后所执行的函数名称
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#up").click(function(){
$("#down").slideUp("slow");
});
});
</script>
<style>
#up
{
padding:5px;
text-align:center;
background-color:#f2f2f2;
border:solid 1px #c3c3c3;
}
#down
{
background-color: #C3C3C3;
padding:50px;
}
</style>
</head>
<body>
<div id="up">滑动面板</div>
<div id="down">jquery</div>
</body>
</html>语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长,它可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是滑动完成后所执行的函数名称
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
如果元素向下滑动,则 slideToggle() 可向上滑动
如果元素向上滑动,则 slideToggle() 可向下滑动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#up").click(function(){
$("#down").slideToggle("slow");
});
});
</script>
<style>
#up
{
padding:5px;
text-align:center;
background-color:#f2f2f2;
border:solid 1px #c3c3c3;
}
#down
{
background-color: #C3C3C3;
padding:50px;
display: none;
}
</style>
</head>
<body>
<div id="up">滑动面板</div>
<div id="down">jquery</div>
</body>
</html>语法:
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长，可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是滑动完成后所执行的函数名称
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'150px'});
});
});
</script>
<style>
div{
background:#f2f2f2;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<div></div>
</body>
</html>语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性
可选的 speed 参数规定效果的时长,可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是动画完成后所执行的函数名称
jQuery animate() - 操作多个属性
生成动画的过程中可同时使用多个属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'150px',
opacity:'1',
height:'150px',
width:'150px'
});
});
});
</script>
<style>
div{
background:#f2f2f2;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<div></div>
</body>
</html>jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值),需要在值的前面加上 += 或 -=:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'150px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
<style>
div{
background:#f2f2f2;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<div></div>
</body>
</html>
jQuery animate() - 使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
<style>
div{
background:#f2f2f2;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<div></div>
</body>
</html>
jQuery animate() - 使用队列功能
jQuery 提供针对动画的队列功能
运用 animate() 调用的"内部"队列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.25'},"slow");
div.animate({width:'300px',opacity:'0.75'},"slow");
div.animate({height:'100px',opacity:'0.25'},"slow");
div.animate({width:'100px',opacity:'0.75'},"slow");
});
});
</script>
<style>
div{
background:#f2f2f2;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<div></div>
</body>
</html>jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#up").click(function(){
$("#down").slideDown(3000);
});
$("#stop").click(function(){
$("#down").stop();
});
});
</script>
<style>
#up,#down{
background:#f2f2f2;
padding: 5px;
text-align: center;
border: 1px #c2c2c2;
}
#down{
padding: 150px;
display: none;
}
</style>
</head>
<body>
<button id="stop">停止动画</button>
<div id="up">滑动面板</div>
<div id="down">jquery</div>
<div></div>
</body>
</html>
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列,默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行
可选的 goToEnd 参数规定是否立即完成当前动画,默认是 false
stop() 会清除在被选元素上指定的当前动画
把 css()、slideUp() 和 slideDown() 链接在一起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("div").css("color","blue").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<div>极客教程</p>
<button>点击</button>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
