编程 Javascript

jQuery使用fadein方法实现渐出效果实例

Posted in Javascript onMarch 27, 2015

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

下面的JS代码通过jQuery的fadein方法控制指定色块逐渐显示的功能

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

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

jQuery使用fadein方法实现渐出效果实例

- Author -

上大王

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Sample script that deletes a SQL Server database

Jun 16 Javascript

jQuery LigerUI 使用教程表格篇(1)

Jan 18 Javascript

js动态生成指定行数的表格

Jul 11 Javascript

js arguments,jcallee caller用法总结

Nov 30 Javascript

laytpl 精致巧妙的JavaScript模板引擎

Aug 29 Javascript

jQuery中dom元素上绑定的事件详解

Apr 24 Javascript

JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)

Jun 21 Javascript

angular中使用Socket.io实例代码

Jun 03 Javascript

vue-cli2.x项目优化之引入本地静态库文件的方法

Jun 19 Javascript

three.js搭建室内场景教程

Dec 30 Javascript

Vue 简单实现前端权限控制的示例

Dec 25 Vue.js

聊聊JS ES6中的解构

Apr 29 Javascript

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

Mar 27 #Javascript

javascript包装对象实例分析

Mar 27 #Javascript

javascript操作select元素实例分析

Mar 27 #Javascript

jquery使用slideDown实现模块缓慢拉出效果的方法

Mar 27 #Javascript

jQuery使用slideUp方法实现控制元素缓慢收起

Mar 27 #Javascript

jquery使用animate方法实现控制元素移动

Mar 27 #Javascript

jQuery获取标签文本内容和html内容的方法

Mar 27 #Javascript