
jquery怎么实现淡入淡出效果?
jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。
● jQuery fadeIn()方法:用于淡入已隐藏的元素
● jQuery fadeOut()方法:用于淡出可见的元素
● jQuery fadeToggle()方法:方法可以在fadeIn()与fadeOut()方法之间进行切换
(相关课程推荐:jQuery教程)
示例:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#app{
width: 100px;
height: 100px;
background: skyblue;
}
#app:focus{
background: green;
}
</style>
</head>
<body>
<script src="./jquery.min.js"></script>
<button id="btnin">淡入</button>
<button id="btnout">淡出</button>
<button id="btntaggle">切换</button>
<div id="app"></div>
<script>
$('#btnin').click(()=>{
$('#app').fadeIn(); // 淡入
})
$('#btnout').click(()=>{
$('#app').fadeOut(); // 淡出
})
$('#btntaggle').click(()=>{
$('#app').fadeToggle(); // 切换
})
</script>
</body>
</html>效果:

本文来自jQuery答疑栏目,欢迎学习!
以上就是jquery怎么实现淡入淡出效果?的详细内容,更多请关注易知道|edz.cc其它相关文章!











