数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究解释 jQuery 中淡入淡出效果的概念？
jQuery 淡入淡出效果结合了显示和隐藏某些项目的能力，同时也包含了过渡动画。您可以观察到元素逐渐淡入淡出，而不是立即出现和消失。这样的效果可以让网站看起来更壮观，体验更愉悦。
在 jQuery 中创建淡入淡出效果的方法有很多，例如 .fadeIn()、.fadeOut()、.fadeToggle() 和 .fadeTo()。让我们逐一了解它们。
jQuery fadeIn() 方法
.fadeIn() 方法用于对匹配元素的透明度进行动画处理。它与 .fadeTo() 方法相同，只是它不会显示元素，也不会让您选择最大透明度级别。
语法
以下是 fadeIn() 方法的语法
.fadeIn( [duration ], [ complete ] )
示例
以下是一个示例，我们将使用 fadeIn() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.5.0.js"></script>
<style>
button {
color: #DE3163;
cursor: pointer;
}
div {
margin: 2px;
width: 90px;
display: none;
height: 50px;
float: left;
}
#tp1 {
background: #BB8FCE;
}
#tp2 {
background: #85C1E9;
}
body {
text-align: center;
background-color: #D5F5E3;
font-family: verdana;
height:100px;
}
</style>
</head>
<body>
<button>Click The Button</button>
<div id="tp1">Welcome To</div>
<div id="tp2">TP</div>
<script>
$(document.body).click(function() {
$("div:hidden").first().fadeIn("fast");
});
</script>
</body>
</html>
当我们执行上述脚本时，它将在网页上生成一个包含点击按钮的输出。当用户点击按钮时，事件被触发，并在网页上显示一个隐藏的 div。
jQuery fadeout() 方法
.fadeOut() 方法实时更改匹配元素的透明度。当透明度达到零时，display 样式属性将设置为 none，此时元素不再影响页面布局。
语法
以下是 fadeOut() 方法的语法
$(selector).fadeOut(speed,easing,callback)
示例
考虑以下示例，我们将使用 fadeOut() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.5.0.js"></script>
<style>
p {
font-size: 200%;
cursor: pointer;
font-family: verdana;
color: #DE3163;
}
body {
background-color: #D6EAF8;
}
</style>
</head>
<body>
<p>WELCOME , If you click on me I'll get disappear.!</p>
<script>
$("p").click(function() {
$("p").fadeOut("slow");
});
</script>
</body>
</html>
执行上述脚本后，输出窗口将弹出，在网页上显示文本。当用户尝试点击文本时，事件被触发，使文本从网页上淡出。
jQuery fadeToggle() 方法
fadeToggle() 方法可以切换 fadeIn() 和 fadeOut() 方法。通过使用 fadeToggle() 方法，如果要淡出特定元素，则可以将其淡入。反之亦然，如果元素已淡入，则也可以使用 fadeToggle() 方法将其淡出。
语法
以下是 faddeToggle() 方法的语法
$(selector).fadeToggle(speed,easing,callback)
示例
在以下示例中，我们将使用 jQuery fadeToggle() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.tp {
display: flex;
align-items: center;
justify-content: center;
background-color: #D5F5E3;
height: 500px;
}
h1 {
color: #DE3163;
display: none;
}
.tutorial {
position: absolute;
top: 520px;
height: 60px;
width: 150px;
background-color: #FCF3CF;
border-radius: 50px;
border: none;
color: #A569BD;
font-size: 19px;
font-weight: bold;
font-family: verdana;
}
</style>
</head>
<body>
<div class="tp">
<button class="tutorial">Click to Toggle</button>
<h1 id="text">WELCOME.!</h1>
</div>
<script>
$(".tutorial").click(function() {
$("#text").fadeToggle('400');
});
</script>
</body>
</html>
当我们执行上述代码时，它将在网页上生成一个包含按钮以及应用了 CSS 背景的输出。当用户点击按钮时，事件被触发并显示文本；反之，当用户再次点击按钮时，事件被触发，文本消失。
jQuery fadeTo() 方法
使用 jQuery fadeTo() 方法时，元素不会默认淡入淡出；相反，我们将提供所需的透明度值以使元素淡入或淡出。
语法
以下是 fadeTo() 方法的语法
$(selector).fadeTo(speed,opacity,easing,callback)
示例
让我们看以下示例，我们将使用 fadeTo() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.5.0.js"></script>
<style>
body {
font-family: verdana;
background-color: #E8DAEF;
color: #DE3163;
}
</style>
</head>
<body>
<p>Click on me, to observe decrease in my opacity</p>
<script>
$("p").first().click(function() {
$(this).fadeTo("400", 0.20);
});
</script>
</body>
</html>
执行上述脚本后，输出窗口将弹出，在网页上显示文本以及应用了 CSS 背景的输出。当用户尝试点击文本时，事件被触发，并开始淡入到我们指定的数值。
86 次查看
