爱站程序员基地显示动画
方式一:直接显示，通过display：block
$(\"div\").show();
方式二：渐渐显示出来，通过控制元素宽高、透明度、display，逐渐显示，传入时间参数
$(\"#d1\").show(2000)//2秒后显示完毕
方式三：传入参数逐渐显示
可以是slow：600ms
normal:400ms
fast:200ms
$(\"#d1\").show(\"slow\")例子```javascript<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script><style type=\"text/css\">#d1{width: 400px;height: 400px;background: aquamarine;display: none;}</style></head><body><div id=\"d1\"></div><button type=\"button\">切换</button><script type=\"text/javascript\">$(\"button\").click(function(){$(\"#d1\").show(2000)})</script></body></html>
方式4：show(时间，回调函数)
$(\"#d1\").show(2000,function(){alert(\"执行完毕\")})
隐藏动画
$(\"#d1\").hide();$(\"#d1\").hide(1000);$(\"#d1\").hide(\"slow\");$(\"#d1\").hide(1000,function(){});
隐藏显示切换例子
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script><style type=\"text/css\">#d1{width: 400px;height: 400px;background: aquamarine;display: none;}</style></head><body><div id=\"d1\"></div><button type=\"button\">切换</button><script type=\"text/javascript\">$(\"button\").click(function(){if($(\"#d1\").css(\"display\")==\"none\"){$(\"#d1\").show(2000)}else{$(\"#d1\").hide(2000)}})</script></body></html>
【注】有写好的函数 $(\”#d1\”).toggle(2000) 就可以实现以上操作
滑入和滑出
$(\"div\").slideDown(speed,回调函数) //滑入$(\"div\").slideUp(speed,回调函数)//滑出$(\"div\").slideToggle(时间)//已经滑入了就滑出，已经滑出了就滑入
淡入和淡出
$(\"div\").fadeIn(speed,回调函数) //淡入$(\"div\").fadeOut(speed,回调函数) //淡出$(\"div\").fadeToggle(时间)//淡入淡出
自定义动画
$(\"div\").animate({params},speed,回调函数);
例子：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script><style type=\"text/css\">#d1{width: 400px;height: 400px;background: aquamarine;display: block;position: absolute;left: 0;top: 0;}#btn1{position: absolute;top: 500px;left: 0;}#btn2{position: absolute;top: 500px;left: 100px;}.dh{animation: leftRight 2s infinite;}@keyframes leftRight{from{transform: translateX(0);}to{transform: translateX(500px);}}</style></head><body><div id=\"d1\"></div><button type=\"button\" id=\"btn1\">动画启动</button><button type=\"button\" id=\"btn2\">动画启动</button><script type=\"text/javascript\">$(\"#btn1\").click(function(){$(\"#d1\").animate({left:\"400px\"},5000,function(){alert(\"动画结束\")})})$(\"#btn2\").click(function(){$(\"#d1\").addClass(\"dh\");})</script></body></html>
以上两种方式都可以让div动起来，但是用css不会卡帧，所以比较推荐css。
停止动画
$(selector).stop(true,false)
第一个参数：
- true：后续动画不执行
- false：后续动画会执行
【注】后续动画是指在一个动画中回调函数中还包含动画。
第二个参数： - true：立即执行完成当前动画
- false：立即停止当前动画
ps：参数不写默认两个flase,实际运行直接写stop()较多。
综合例子：
微信公众号的点击列表：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script><style type=\"text/css\">*{margin:0;padding: 0;box-sizing: border-box;}.menuList{position: fixed;left: 0;bottom: 0;width: 100%;height: 100px;background: #efefef;display: flex;}.menuItem{width: 33.3%;height: 100px;border: 1px solid #ccc;position: relative;}.menuItem .title,.childMenu{width: 33.3vw;height: 100px;line-height: 100px;text-align: center;font-size: 40px;border: 1px solid #ccc;}.menuItem .menuContent{display: none;position: absolute;left: 0;top: 0px;height: 0px;overflow: hidden;}</style></head><body><div class=\"menuList\"><div class=\"menuItem\"><div class=\"title\" data-index=\"0\">娱乐新闻</div><div class=\"menuContent\"><div class=\"childMenu\">新闻1</div><div class=\"childMenu\">新闻2</div><div class=\"childMenu\">新闻3</div></div></div><div class=\"menuItem\"><div class=\"title\" data-index=\"1\">国内新闻</div><div class=\"menuContent\"><div class=\"childMenu\">新闻1</div><div class=\"childMenu\">新闻2</div><div class=\"childMenu\">新闻3</div></div></div><div class=\"menuItem\"><div class=\"title\" data-index=\"2\">金融新闻</div><div class=\"menuContent\"><div class=\"childMenu\">新闻1</div><div class=\"childMenu\">新闻2</div><div class=\"childMenu\">新闻3</div></div></div></div><script type=\"text/javascript\">$(\'.title\').click(function(){var index=$(this).attr(\'data-index\');console.log(index)$(\".menuContent\").hide().css({top: \"0px\",height: \"0px\"}).eq(index).show().animate({height:\"300px\",top:\"-300px\"},500)})</script></body></html>
结果：
