JQ动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>JQ动画效果</title>
<style>
*{margin:0px;padding: 0px;}
a{text-decoration: none;color:#000;font-size: 12px; }
li{list-style: none;}
.clear{clear: both;}
.header{width:100%;}
.content{width:1200px;margin: 0px auto;height: 100px;}
button{outline: none; color: #fff;background-color: #4caf50;border: none;padding: 5px 12px;font-size: 16px;border-radius: 14px;margin: 13px;}
.header_1{width:1200px;height: 60px; margin: 0px auto;background: linear-gradient(to right,#000,#fff);line-height: 40px;}
.header_1_a{width: 150px;height: 220px;margin-right: 20px; float: left;}
.box1,.box2,.box3,.box4{width: 100px;height: 100px;background: orange;margin-top: 20px;border-radius: 10px;}
.header_1_b{height: 200px;width: 1200px;margin: 0px auto;}
.box5{width: 90px;height: 90px;background: orchid;border-radius: 90px;margin: 4px;position: absolute;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.button_1').click(function(){
$('.p_1').hide(1000) //点击隐藏
})
$('.button_2').click(function(){
$('.p_1').show(1000) //点击显示
})
$('.p_2').hide()
$('.button_3').click(function(){
$('.p_2').slideDown(1000) //下滑显示
})
$('.button_4').click(function(){
$('.p_2').slideUp(1000) //上滑隐藏
})
$('.button_5').click(function(){
$('.p_3').slideToggle(500) //显示隐藏切换
})
$('.box1').hide()
$('.button_6').click(function(){
$('.box1').fadeIn(1000) //淡入
})
$('.button_7').click(function(){
$('.box2').fadeOut(1000) //淡出
})
$('.button_8').click(function(){
$('.box3').fadeToggle(1000) //切换
})
$('.button_9').click(function(){
$('.box4').fadeTo(1000,0.2) //淡出到指定值
})
$('.button_10').click(function(){
$('.p_4').animate({fontSize:'40px'},1000) //点击字体放大
})
$('.button_11').click(function(){
$('.box5').animate({
//left :'1000px', //如果想对元素位置进行一个位移，那么我们需要给当前元素设置一个position，例如：position: absolute
//opacity:'0.4',
// height:'180px',
//width:'180'
width:'toggle'
},3000)
})
$('.button_12').click(function(){
$('.box5').stop(true) //停止动画
})
})
</script>
<!-- 点击隐藏 -->
</head>
<body>
<div class="header">
<div class="header_1">
<button class="button_1">点击隐藏</button>
<button class="button_2">点击显示</button>
<button class="button_3">下滑显示</button>
<button class="button_4">上滑隐藏</button>
<button class="button_5">显示隐藏切换</button>
</div>
<div class="content">
<p class="p_1">外湖莲子长参差，霁山青处鸥飞。水天溶漾画桡迟，人影鉴中移。</p>
<p class="p_1">桃叶浅声双唱，杏红深色轻衣。小荷障面避斜晖，分得翠阴归。</p>
</div>
<hr>
<div class="content">
<p class="p_2">一夜冰澌满玉壶。五更喜气动洪炉。</p>
<p class="p_2">门前桃李知麟集，庭下芝兰看鲤趋。</p>
<p class="p_2">泉脉动，草心苏。日长添得绣工夫。</p>
<p class="p_2">试询补衮弥缝手，真个曾添一线无。</p>
</div>
<hr>
<div class="content">
<p class="p_3">一夜冰澌满玉壶。五更喜气动洪炉。</p>
<p class="p_3">门前桃李知麟集，庭下芝兰看鲤趋。</p>
<p class="p_3">泉脉动，草心苏。日长添得绣工夫。</p>
<p class="p_3">试询补衮弥缝手，真个曾添一线无。</p>
</div>
<hr>
<div class="header_1">
<div class="header_1_a">
<button class="button_6">淡入</button>
<div class="box1"></div>
</div>
<div class="header_1_a">
<button class="button_7">淡出</button>
<div class="box2"></div>
</div>
<div class="header_1_a">
<button class="button_8">切换</button>
<div class="box3"></div>
</div>
<div class="header_1_a">
<button class="button_9">淡出到指定值</button>
<div class="box4"></div>
</div>
</div>
<div class="clear"></div>
<hr>
<div class="header_1">
<button class="button_10">点击字体放大</button>
</div>
<div class="header_1_b">
<p class="p_4">JQ中我们使用 animate()方法创建自定义的动画效果</p>
</div>
<hr>
<div class="header_1">
<button class="button_11">点击移动DIV</button>
<button class="button_12">停止</button>
</div>
<div class="header_1_b">
<div class="box5"></div>
</div>
</div>
</body>
</html>