jQuery fade in and out animation function

The fade function only provides the effect of transparency gradient.

Fade function Fading

Achieve the fade-out effect of all matching elements through changes in opacity, and optionally trigger a callback function after the animation is completed. Slowly fade out the paragraph in 600 milliseconds:

Explanation

The fadeIn and fadeOut functions correspond to show and hide, which are used to display and hide objects with a transparency gradient effect:

$("#divPop").fadeIn(200);
$("#divPop").fadeOut("fast");

1. Fade in Fade out

1、jQuery fadeIn() method

jQuery fadeIn() is used to fade in hidden elements.

 语法：$(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.

The following example demonstrates the fadeIn() method with different parameters:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.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>点击这里，使三个矩形淡入</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>

QQ截图20161026101329.png

##2. jQuery fadeOut() method

The jQuery fadeOut() method is used to fade out visible elements.

语法：$(selector).fadeOut(speed,callback);

The following example demonstrates the fadeOut() method with different parameters:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeOut();  
    $("#div2").fadeOut("slow");  
    $("#div3").fadeOut(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeOut() 方法。</p>  
<button>点击这里，使三个矩形淡出</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>

QQ截图20161026101513.png

3. jQuery fadeToggle() method

The jQuery fadeToggle() method can switch between the fadeIn() and fadeOut() methods. If the element is already faded out, fadeToggle() adds a fade-in effect to the element. If the element is already faded in, fadeToggle() adds a fade out effect to the element.

         语法：$(selector).fadeToggle(speed,callback);

The following example demonstrates the fadeToggle() method with different parameters:

<!DOCTYPE html>  
<html>  
<head>  
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeToggle();  
    $("#div2").fadeToggle("slow");  
    $("#div3").fadeToggle(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeToggle() 方法。</p>  
<button>点击这里，使三个矩形淡入淡出</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>  
</body>  
</html>

4. jQuery fadeTo() method

The jQuery fadeTo() method allows gradients to be A certain opacity (value between 0 and 1).

 语法：$(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 when the function completes.

The following example demonstrates the fadeTo() method with different parameters:

<!DOCTYPE html>  
<html>  
<head>  
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeTo("slow",0.15);  
    $("#div2").fadeTo("slow",0.4);  
    $("#div3").fadeTo("slow",0.7);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeTo() 方法。</p>  
<button>点击这里，使三个矩形淡出</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>

            //设置弹出层的透明度
               $("#divPop").fadeTo(0, 0.66);                //让弹出层透明显示
               if ($("#divPop").css("display") == "none")
               {
                   $("#divPop").fadeIn(speed);
               }                else
               {
                   $("#divPop").fadeOut(speed);
               }

After using fadeTo to set the popup layer transparency, using fadeIn will cause the object to display and fade to the fadeTo setting. Transparency.

What is introduced here is only the characteristics of the two functions. In actual applications, they do not necessarily need to be used together.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.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>点击这里，使三个矩形淡入</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>

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

Name	Description	Example
fadeIn( speed, [callback] )	Achieve the fade-in effect of all matching elements through changes in opacity, and can be used after the animation is completed Optionally trigger a callback function. This animation only adjusts the opacity of the element, which means that the height and width of all matching elements will not change.	Slowly fade the paragraph in for 600 milliseconds: `$("p").fadeIn("slow");`
##fadeOut( speed, [callback] )		$("p").fadeOut("slow");
##fadeTo(speed, opacity, [callback] )Gradually adjusts the opacity of all matching elements to the specified opacity, and optionally triggers a callback function after the animation completes.	Slowly adjust the transparency of the paragraph to 0.66 over 600 milliseconds, about 2/3 visibility:	$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);

jQuery fade in and out animation function

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]