Home >Web Front-end >Front-end Q&A >How to use fadeout method in jquery
How to use fadeout method in jquery
- WBOYOriginal
- 2022-04-15 12:01:323124browse
In jquery, the fadeout() method is used to gradually change the opacity of selected elements, from visible to hidden; elements hidden using this method will not affect the layout of the page, and the parameters in the setting method can be changed The speed at which the element fades. The syntax is "element object.fadeOut(speed, easing, execution function)".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How to use the fadeout method in jquery
The fadeOut() method gradually changes the opacity of the selected element, from visible to hidden (fading effect).
Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).
Tip: This method is usually used with the fadeIn() method.
Syntax
$(selector).fadeOut(speed,easing,callback)
The parameters are expressed as follows:
speed is optional. Specifies the speed of the fading effect. Possible values:
milliseconds
"slow"
"fast"
easing Optional . Specifies the element's speed at different points in the animation. The default value is "swing". Possible values:
"swing" - move slower at the beginning/end, faster in the middle
"linear" - move at a constant speed
Tip : More available easing functions are provided in the extension plug-in.
callback Optional. The function to be executed after the fadeOut() method is executed.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
});
</script>
</head>
<body>
<button class="btn1">淡出</button>
<p>这是一个段落。</p>
</body>
</html>Output result:
Related video tutorial recommendation: jQuery video Tutorial
The above is the detailed content of How to use fadeout method in jquery. For more information, please follow other related articles on the PHP Chinese website!