极客教程什么是jQuery淡化效果
在这篇文章中，我们将探讨jQuery中的渐变效果。褪色基本上是通过某些元素的不透明度来实现的。在jQuery中，我们可以根据不透明度来淡入和淡出元素。在jQuery中，我们有几种方法可以帮助我们实现褪色的效果。我们将通过适当的例子来了解每个方法。
Fading 方法:
jQuery fadeIn() 方法： 在这个方法的帮助下，我们可以淡化一个基本上隐藏在网页上的元素。
语法:
$(selector).fadeIn(<duration>,
<easing>, <callback function>);
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
#fadein {
position: absolute;
top: 550px;
height: 50px;
width: 130px;
background-color: rgb(0, 141, 19);
outline: none;
border: none;
border-radius: 60px;
color: black;
font-size: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">
<button id="fadein">Fade In</button>
<h1 id="text">Text in now visible</h1>
</div>
<!-- jQuery code -->
<script>
// Initially text is invisible.
("#fadein").click(function () {
("#text").fadeIn(2000, function () {
alert("Animation is completed");
});
});
</script>
</body>
</html>
输出:
淡入的例子
jQuery fadeOut() 方法 。这个方法的作用与fadeIn()方法相反，它将使一个元素不可见。
语法:
$(selector).fadeOut(<duration>,
<easing>, <callback function>);
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
#fadeout {
position: absolute;
top: 550px;
height: 50px;
width: 130px;
background-color: rgb(0, 141, 19);
outline: none;
border: none;
border-radius: 60px;
color: black;
font-size: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">
<button id="fadeout">Fade Out</button>
<h1 id="text">Click button to hide text.</h1>
</div>
<!-- jQuery code -->
<script>
("#fadeout").click(function () {
("#text").fadeOut(2000, function () {
alert("Animation is completed");
});
});
</script>
</body>
</html>
淡出的例子
jQuery fadeToggle() Method: 这个方法将在单个按钮点击时在fadeIn()和fadeOut()方法之间进行切换。
语法:
$(selector).fadeToggle(<duration>,
<easing>, <callback function>);
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
.Toggle {
position: absolute;
top: 550px;
height: 50px;
width: 130px;
background-color: rgb(0, 141, 19);
border-radius: 60px;
border: none;
color: black;
font-size: 1rem;
font-weight: bold;
}
.Toggle:hover {
background-color: rgb(1, 122, 17);
}
</style>
</head>
<body>
<div class="main">
<button class="Toggle">Fade Toggle</button>
<h1 id="text">Text in now visible</h1>
</div>
<!-- jQuery code -->
<script>
(".Toggle").click(function () {
("#text").fadeToggle("fast");
});
</script>
</body>
</html>
输出:
jQuery fadeTo() 方法：在这个方法中，它不会通过默认值来淡化元素，实际上，我们将传递所需的不透明度值来淡化或退出。
语法:
$(selector).fadeTo(<duration>, <opacity>,
<easing>, <callback function>);
例子：在这个例子中，我们将把一个元素淡化为三个不同的值。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: row;
height: 100vh;
}
#text2 {
margin: 170px;
color: white;
}
h1 {
color: white;
}
#fadeto1 {
position: absolute;
top: 550px;
left: 500px;
height: 50px;
width: 130px;
background-color: rgb(0, 141, 19);
outline: none;
border: none;
border-radius: 60px;
color: black;
font-size: 1rem;
font-weight: bold;
}
#fadeto2 {
position: absolute;
top: 550px;
height: 50px;
width: 130px;
background-color: rgb(0, 141, 19);
outline: none;
border: none;
border-radius: 60px;
color: black;
font-size: 1rem;
font-weight: bold;
}
#fadeto3 {
position: absolute;
top: 550px;
right: 500px;
height: 50px;
width: 130px;
background-color: rgb(0, 141, 19);
outline: none;
border: none;
border-radius: 60px;
color: black;
font-size: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">
<button id="fadeto1">Fade To 0.5 opacity</button>
<button id="fadeto2">Fade To 0.2 opacity</button>
<button id="fadeto3">Fade To 0 opacity</button>
<h1 id="text1">GeeksforGeeks</h1>
<h1 id="text2">GeeksforGeeks</h1>
<h1 id="text3">GeeksforGeeks</h1>
</div>
<!-- jQuery code -->
<script>
("#fadeto1").click(function () {
("#text1").fadeTo("slow", 0.5);
});
("#fadeto2").click(function () {
("#text2").fadeTo("slow", 0.2);
});
("#fadeto3").click(function () {
("#text3").fadeTo("slow", 0);
});
</script>
</body>
</html>
输出:
淡出的例子