Rumah > Artikel > hujung hadapan web > 身日了解jQuery中fadeOut()方法的使用

身日了解jQuery中fadeOut()方法的使用

巴扎黑asal: 2017-06-29 11:58:351217semak imbas

这篇文章主要介绍了jQuery中fadeOut()方法用法,以实例形式分析了fadeOut()方法的功能、定义及具体使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery中fadeOut()方法用法。分享给大家供大家参考。具体分析如下：

此方法通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

fadeOut()方法的用法:

此方法可以规定动画效果的持续时间。例如:

代码如下:

$("p").fadeOut(5000)

以上代码规定p的淡出效果可在5000毫秒(5秒)内完成。
此方法也可以在动画完成后触发一个回调函数。例如:

代码如下:

$("p").fadeOut(5000,function(){alert('动画效果完成！')})

以上代码能够在动画完成以后触发回调函数，于是弹出一个提示框。
实例代码:

代码如下:

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

以上代码点击按钮可以缓慢将p设置为透明效果，完全透明之后，然后指定回调函数。

Atas ialah kandungan terperinci 身日了解jQuery中fadeOut()方法的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery.fadeOut() 函数实例用法详解Artikel seterusnya：jQuery中 hide和fadeOut的区别 show和fadeIn的区别

Artikel berkaitan

Lihat lagi