How to achieve div fade effect in jquery-Front-end Q&A-php.cn

How to achieve div fade effect in jquery

青灯夜游

Release： 2022-09-14 18:42:17

Original

2047 people have browsed it

Three implementation methods: 1. Use fadeOut() to gradually change the opacity of the selected element, from visible to hidden, with the syntax "element object.fadeIn (fade in duration)"; 2. Use fadeTo() Gradually change the opacity of the selected element, the syntax is "element object.fadeTo(fade duration, 0)"; 3. Use fadeToggle() to gradually change the opacity of the selected element, the syntax is "element object.fadeToggle(fade duration) ".

How to achieve div fade effect in jquery

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

In jquery, there are three methods to achieve the fade effect of div:

fadeOut() method
fadeToggle () Method
fadeTo() Method

##1、fadeOut() Method

fadeOut () method gradually changes the opacity of the selected element from visible to hidden (fade effect).

Syntax:

$(selector).fadeOut(speed,easing,callback)

Copy after login

ParametersDescriptionOptional. Specifies the speed of the fading effect. Optional. Specifies the element's speed at different points in the animation. The default value is "swing". Optional. The callback function to be executed after the fadeOut() method is executed.


speed	Possible values: Milliseconds "slow" "fast"
easing	Possible values: "swing" - moves slowly at the beginning/end, moves fast in the middle "linear" - moves at a constant speed Tips: More available easing functions are provided in the extension plug-in.
callback

speed

Possible values:

easing

Possible values:

Tips: More available easing functions are provided in the extension plug-in.

callback

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeOut();
					$("#div2").fadeOut("slow");
					$("#div3").fadeOut(3000);
				});
			});
		</script>
	</head>

	<body>
		<p>以下实例演示了 fadeOut()  使用了不同参数的效果。</p>
		<button>点击渐隐div元素。</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

	</body>
</html>

Copy after login

How to achieve div fade effect in jquery

##2. fadeTo() method

## The #fadeTo() method allows a fade to a given opacity (value between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);

Copy after login

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 0 to achieve the fade effect.

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeTo("fast",0);
		$("#div2").fadeTo("slow",0);
		$("#div3").fadeTo(3000,0);
	});
});

Copy after login

How to achieve div fade effect in jquery 3. fadeToggle() method

fadeToggle() method can be between fadeIn() and fadeOut() methods Make the switch.

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);
	});
});
```
Copy after login
[Recommended learning: jQuery video tutorial
,
web front-end】
The above is the detailed content of How to achieve div fade effect in jquery. For more information, please follow other related articles on the PHP Chinese website!