这次给大家带来如何做出淡入淡出与滑入滑出动画案例，做出淡入淡出与滑入滑出的注意事项有哪些，下面就是实战案例，一起来看一下。
1. 淡入淡出效果：
我们做这样一个实例：
有两个按钮，点击淡入，有一个p层淡入，点击淡出，p层淡出：
html>
<meta>
<title>jQuery淡入淡出</title>
<style>
.p{width: 300px;height: 300px;background-color: red;display: none;}
</style>
<script></script>
<script>
$(function(){
$("#btn").click(function(){
$(".p").fadeIn();
});
$("#btna").click(function(){
$(".p").fadeOut();
});
});
</script>
<input>
<input>
<p>
我是一个p块哦！！！！！
</p>
运行效果：
2. 滑入滑出效果：
我们做这样一个实例：
有两个按钮，点击滑入，有一个p层滑入，点击滑出，p层滑出：
html>
<meta>
<title>jQuery滑入滑出</title>
<style>
.p{width: 300px;height: 300px;background-color: green;display: none;}
</style>
<script></script>
<script>
$(function(){
$("#btn").click(function(){
$(".p").slideDown();
});
$("#btna").click(function(){
$(".p").slideUp();
});
});
</script>
<input>
<input>
<p>
我是一个p块哦！！！！！
</p>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
