点击刷新
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>效果：
© 著作权归作者所有
举报
发表评论
0/200
