一、 jQuery 动画效果总结:
show( ) hide( ) toggle( ) slideUp( ) slideDown( ) slideToggle( )
二、jQuery的淡入淡出:通过 jQuery,可以实现元素的淡入淡出效果
jQuery 拥有下面四种 fade 方法:
1、 jQuery fadeIn() 方法
2、fadeOut()
3、fadeToggle()
4、fadeTo()
三、jQuery的尺寸
两种方法:
- width():设置或返回元素的宽度(不包括内边距、边距、或外边距)
height() :方法设置或返回元素的高度(不包括内边距、边框或外边距)
课堂案例
用代码实现出现、隐藏、toggle:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
#show,#content,#hide,#flip{
padding: 5px;
text-align: center;
background-color: #f5422e;
border: 2px solid #000000;
}
#content{
padding: 50px;
display: none;
}
</style>
<script>
$(document).ready(function () {
$("#show").click(function () {
$("#content").slideDown(1000);
});
$("#hide").click(function () {
$("#content").slideUp(1000);
});
$("#flip").click(function () {
$("#content").slideToggle(1000);
});
});
</script>
</head>
<body>
<div id="show">出现</div>
<div id="hide">隐藏</div>
<div id="flip">toggle</div>
<div id="content">helloword</div>
</body>
<html>