jQuery使用fadeout实现元素渐隐效果的方法

更新时间：2015年03月27日 12:33:55 作者：上大王

这篇文章主要介绍了jQuery使用fadeout实现元素渐隐效果的方法,实例分析了jQuery中fadeout方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery使用fadeout实现元素渐隐效果的方法。分享给大家供大家参考。具体分析如下：

下面的JS代码演示了jQuery控制色块元素逐渐隐藏的效果，可以控制隐藏速度

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
 });
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</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>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery ready()和onload的加载耗时分析
这篇文章主要介绍了jQuery ready()和onload的加载耗时,结合实例形式对比分析了jQuery中的ready()和JavaScript的window.onload进行页面加载的时间,需要的朋友可以参考下
2016-09-09
基于Jquery插件Uploadify实现实时显示进度条上传图片
这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
JQuery操作textarea,input,select,checkbox方法
本文给大家汇总介绍了一些JQuery操作textarea,input,select,checkbox的方法和技巧，十分的简单实用，都是小编项目中使用过的，这里推荐给大家。
2015-09-09
jquery.validate表单验证插件使用详解
这篇文章主要为大家详细介绍了jquery.validate表单验证插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Lazy Load 延迟加载图片的 jQuery 插件
本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.
2010-02-02
JSON格式化输出
本文主要是记录一个项目中用到的对输出的json进行格式化的小技巧，也是看到一位朋友分享的，这里mark一下，有需要的小伙伴也可以参考下。
2014-11-11
jQuery 插件开发指南
jQuery凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。
2014-11-11
jQuery validate 验证radio实例
这篇文章主要介绍了jQuery validate 验证radio实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
jquery单行文字向上滚动效果示例
这篇文章主要介绍了jquery实现的单行文字向上滚动效果,需要的朋友可以参考下
2014-03-03
Jquery 实现checkbox全选方法
本文主要向大家展示了一段使用jQuery实现checkbox全选的方法，以及编写此方法的背景和过程，非常详细，这里推荐给小伙伴们。
2015-01-01