前端基础 -JQuery之相关效果

Mike

　　JQuery相关效果

　　显示和隐藏：
show([毫秒值]) 显示
hide([毫秒值]) 隐藏
taggle([毫秒值]) 切换
　　滑入和滑出：
slidedown([毫秒值]) 滑入
slideup([毫秒值]) 滑出
slideToggle([毫秒值]) 切换
　　淡出和淡出：
fadeIn([毫秒值]) 淡入
fadeOut([毫秒值]) 淡出
fadeToggle([毫秒值]) 切换
fadeTo()

案例：
　　效果图：

　　代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:1px solid #000;
width:100px;
height:100px;
}
</style>
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//显示和隐藏
$("#b1").click(function(){
//$("#b1Div").hide(2000);
$("#b1Div").toggle(2000);
})
//滑入和滑出
$("#b2").click(function(){
//$("#b2Div").slideUp(2000);
$("#b2Div").slideToggle(2000);
})
//淡入和淡出
$("#b3").click(function(){
//$("#b3Div").fadeOut(2000);
//$("#b3Div").fadeToggle(2000);
$("#b3Div").fadeTo(1000,0.5,function(){
alert("淡化完成");
})
})
});
</script>
</head>
<body>
<input type="button" id="b1" value="显示/隐藏 b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="淡出/淡入b3Div" />
<div id="b3Div"></div>
</body>
</html>

[jQuery] 前端基础 -JQuery之相关效果

相关帖子

2345浏览器设置显示侧边栏教程

利用CSS样式将网页变黑白色效果

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

Discuz!X3.5支付宝充值积分支付后显示未成功解决方法

7种好看的鼠标点击效果

好看的CSS3滑动按钮特效

php实现超简的分页功能

解决编辑器图片插入多次但发布后只显示一次问题

Mike LV4

[jQuery] 前端基础 -JQuery之 相关效果

相关帖子

2345浏览器设置显示侧边栏教程

利用CSS样式将网页变黑白色效果

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

Discuz!X3.5支付宝充值积分支付后显示未成功解决方法

7种好看的鼠标点击效果

好看的CSS3滑动按钮特效

php实现超简的分页功能

解决编辑器图片插入多次但发布后只显示一次问题

Mike LV4

[jQuery] 前端基础 -JQuery之相关效果