1.jquery隐藏and显示事件
$("p").hide(); //隐藏事件
$("p").hide(1000); //1秒内缓慢隐藏
$("p").show(); //显示事件
$("p").toggle(); //在隐藏和显示中切换隐藏后显示提示callback
$("p").hide(function(){ alert("提示消息已经隐藏"); });
$("p").hide(1000,function(){ alert("1s内缓慢隐藏并提示消失已经隐藏"); });2.淡入淡出
$("#p1").fadeIn(); //淡入$("#p2").fadeIn("slow"); //缓慢淡入$("#p3").fadeIn(3000); //延迟3秒淡入
$("#p").fadeOut() //淡出
$("#p").fadeToggle() //淡入淡出
$("#p3").fadeTo("slow",0.7); //设置淡化程度 0完全消失，1不淡化3.滑入滑出
$(".panel").slideDown(); //向下滑动显示class=panel的p
$(".panel").slideUp("slow"); //向上收起class=panel的p
$(".panel").slideToggle("slow"); //点击显示，再点击收起例子如下：
<head>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow"); //点击向下滑动显示p，再次点击收起
});
});
</script>
<style type="text/css">
p.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.panel
{
height:120px;
display:none; /*设置隐藏的p*/
}
</style>
</head>
<body>
<p class="panel">
<p>显示隐藏的p</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1232" title="Hotpot.ai"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b79fd52c5e6105.png" alt="Hotpot.ai" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1232" title="Hotpot.ai">Hotpot.ai</a>
<p>AI工具箱（图像、游戏和写作系列工具）</p>
</div>
<a href="/ai/1232" title="Hotpot.ai" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>请大家关注我的博客</p>
</p>
<p class="flip">点击显示，再次点击隐藏</p>
</body>4.动画animate
首先，说明一下为什么要调用animate，而不是直接修改css属性：用animate可以缓慢的修改p的样式，动画效果更加美观，而直接修改css则是加载闪烁直接完成，效果不佳。
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
例子：
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").animate({
left:'250px',
opacity:'0.5', //淡化
height:'150px',
width:'150px'
//height:'+=150px', //可使用相对值
//width:'+=150px'
//height:'toggle', //使用预定值，从消失到显示
//width:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>
</body>分步动画
<script>
$(document).ready(function(){
$("button").click(function(){
var p=$("p"); //
定义变量
p到指定位置
p.animate({height:'300px',opacity:'0.4'},"slow");
p.animate({width:'300px',opacity:'0.8'},"slow");
p.animate({height:'100px',opacity:'0.4'},"slow");
p.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>5.停止动画
$("p").stop(); //按钮会停止当前活动的动画，但允许已排队的动画向前执行。
$("p").stop(true); //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
$("p").stop(true,true); //会立即完成当前活动的动画，然后停下来。 
