【jQuery>动画方法

<div class="div02" style="width: 100px;height: 100px;">

<!-- jQuery动画 -->
<button class="btn04" type="button">隐藏</button>
<button class="btn05" type="button">显示</button>
<button class="btn06" type="button">切换</button>
<br>
<button class="btn07" type="button">淡入</button>
<button class="btn08" type="button">淡出</button>
<button class="btn09" type="button">切换</button>
<button class="btn10" type="button">透明度</button>
<br>
<button class="btn11" type="button">上滑</button>
<button class="btn12" type="button">下滑</button>
<button class="btn13" type="button">切换</button>
<script type="text/javascript">
$('.btn04').click(function() {
$('.div02').hide(2000)
}) //隐藏
$('.btn05').click(function() {
$('.div02').show(2000)
}) //显示
$('.btn06').click(function() {
$('.div02').toggle(2000)
}) //隐藏和显示
// ·······································
$('.btn07').click(function() {
$('.div02').fadeIn(2000)
}) //淡入
$('.btn08').click(function() {
$('.div02').fadeOut(2000)
}) //淡出
$('.btn09').click(function() {
$('.div02').fadeToggle(2000)
}) //淡入和淡出
$('.btn10').click(function() {
$('.div02').fadeTo(2000, 0.3)
}) //透明度fadeTo('time','透明度')改变后不恢复
//···········································
$('.btn11').click(function() {
$('.div02').slideUp(1000)
}) //上滑
$('.btn12').click(function() {
$('.div02').slideDown(1000)
}) //下滑
$('.btn13').click(function() {
$('.div02').slideToggle(1000)
}) //上滑和下滑
</script>