极客教程解释一下jQuery中淡化效果的概念
jQuery中的渐变效果可以使用不同的方法创建，如fadeIn(), fadeOut(), fadeToggle(), 和 fadeTo()。这些方法可以用来在jQuery中用不同的参数创建不同的渐变效果。
fadeIn():该方法用于使元素以渐变效果隐藏。
语法:
$('selector').fadeIn(speed, callback_function);
fadeOut():该方法用于使元素由可见转为隐藏，并有渐变效果。
语法:
$('selector').fadeOut(speed, callback_function);
fadeToggle():该方法用于在fadeIn()和fadeOut()方法之间切换渐变效果。
语法:
$('selector').fadeToggle(speed, callback_function);
fadeTo():该方法用于将可见元素淡化到参数中给出的某种程度的不透明度，参考1。
语法:
$('selector').fadeTo(speed, opacity, callback_function);
下面的例子阐述了一些淡化效果的概念。
例子1：下面的代码显示，图像在fadeIn()和fadeOut()方法之间切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content= "width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
body {
text-align: center;
}
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button id="btnfadeToggle">FADE TOGGLE</button>
<br>
<!-- Image added using img tag with src attribute -->
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"
id='img1' height='150px' width='250px'>
<img>
<script>
(document).ready(function() {
('#btnfadeToggle').click(function() {
$('#img1').fadeToggle('slow');
});
});
</script>
</body>
</html>
输出:
例子2：下面的代码显示了jQuery中的fadeTo()方法，它被用来改变所选元素的不透明度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content= "width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button id="btnfadeTo">FADE TO</button>
<br>
<!-- Image added using img tag with
src attribute -->
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"
id='img1' height='150px' width='250px'>
<img>
<script>
(document).ready(function() {
('#btnfadeTo').click(function() {
$('#img1').fadeTo('slow', 0.4);
});
});
</script>
</body>
</html>
输出:
