Home >Web Front-end >JS Tutorial >Learn about the use of fadeOut() method in jQuery

Learn about the use of fadeOut() method in jQuery

巴扎黑Original: 2017-06-29 11:58:351232browse

This article mainly introduces the usage of the fadeOut() method in jQuery, and analyzes the function, definition and specific usage techniques of the fadeOut() method in the form of examples. It has certain reference value. Friends in need can refer to it

The example in this article describes the usage of the fadeOut() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method achieves the fade-out effect of all matching elements through changes in opacity, and optionally triggers a callback function after the animation is completed. .

Usage of fadeOut() method:

This method can specify the duration of the animation effect. For example:

The code is as follows:

$("p").fadeOut(5000)

The above code stipulates that the fade-out effect of p can be within 5000 milliseconds (5 completed within seconds).
This method can also trigger a callback function after the animation is completed. For example:

The code is as follows:

$("p").fadeOut(5000,function(){alert('Animation effect completed!')})

The above code can trigger the callback function after the animation is completed, so a prompt box will pop up.
Example code:

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>fadeOut()函数-脚本之家</title>
<style type="text/css">
p{
  
background
:#060;
  width:300px;
  height:300px;
  color:red
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(
document
).ready(function(){
  $("#up").click(function(){
    $("p").fadeOut(5000,function(){alert(&#39;动画效果完成！&#39;)});
  })
})
</script> 
</head>
<body>
  <p></p>
  <button id="up">点击查看效果</button>
</body>
</html>

Click the button for the above code to slowly set p to a transparent effect. After it is completely transparent, then specify the callback function.

The above is the detailed content of Learn about the use of fadeOut() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!

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：Detailed explanation of jQuery.fadeOut() function instance usageNext article：Detailed explanation of jQuery.fadeOut() function instance usage

See more

Learn about the use of fadeOut() method in jQuery

Related articles