jQuery 动画效果总结:
show(),hide(),toggle(),slideUp(),slideDown(),slideToggle(),animate(),slide Window(滑动窗口)
jQuery的淡出淡入
<!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>