search

Home >Web Front-end >Front-end Q&A >How to achieve div fade effect in jquery

How to achieve div fade effect in jquery

青灯夜游
青灯夜游Original
2022-09-14 18:42:172048browse

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)

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
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>

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);

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);
	});
});

How to achieve div fade effect in jquery3. 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);
	});
});

[Recommended learning: How to achieve div fade effect in jqueryjQuery 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!

jquery 回调函数 对象
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What is the use of jquery eq() methodNext article：What is the use of jquery eq() method

Related articles

See more