Home >Web Front-end >Front-end Q&A >Which method is jquery fade-in?
Which method is jquery fade-in?
- 青灯夜游Original
- 2022-05-17 14:49:062216browse
There are three methods of fading in: 1. fadeIn(), which can fade in hidden elements, the syntax is "element object.fadeIn(fade in duration)"; 2. fadeTo(), the syntax is "element object.fadeTo(duration, 1)"; 3. fadeToggle(), syntax "object.fadeToggle(duration)".
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
In jquery, there are three methods to achieve the fade-in effect:
fadeIn() method
fadeToggle() Method
fadeTo() Method
1、fadeIn() Method
fadeIn() Used to fade in hidden elements.
Syntax:
$(selector).fadeIn(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. .
The optional callback parameter is the name of the function to be executed after fading is completed.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
2. fadeTo() method
fadeTo( ) method allows a gradient to a given opacity (value between 0 and 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method sets the fade effect to the given opacity (a value between 0 and 1).
The optional callback parameter is the name of the function to be executed after the function completes.
You only need to set the value of the opacityc parameter to 1 to achieve the fade-in effect.
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeTo("fast",1);
$("#div2").fadeTo("slow",1);
$("#div3").fadeTo(5000,1);
});
});
3. fadeToggle() method
fadeToggle() method can be used between fadeIn() and fadeOut() Switch between methods.
fadeToggle() adds a fade-in effect to the element if it is hidden.
fadeToggle() adds a fade out effect to the element if it is already displayed.
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(5000);
});
});
[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of Which method is jquery fade-in?. For more information, please follow other related articles on the PHP Chinese website!