一、案例描述
一打开页面，内容缓慢出现。
二、案例效果演示
三、案例局部代码
css代码：
<style>div {width: 300px;height: 300px;border: 1px solid red;display: none;}img {width: 100%;height: 100%;}</style>
html代码：
<div><img src="./img/female.jpeg" alt="" /></div>
js代码：
<script>$(function() {$('div').slideDown(3000);$('div').click(function() {$(this).slideUp(3000);});});</script>
四、案例整体代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jQuery.min.js"></script><style>div {width: 300px;height: 300px;border: 1px solid red;display: none;}img {width: 100%;height: 100%;}</style></head><body><div><img src="./img/female.jpeg" alt="" /></div><script>$(function() {$('div').slideDown(3000);$('div').click(function() {$(this).slideUp(3000);});});</script></body></html>
五、总结
slideDown()滑动下拉
slideUp()滑动上拉
参考：
/jquery/effect_slidedown.asp
/jquery/effect_slideup.asp
