1.显示动画
1.1无参数，直接让指定的元素显示出来
$("div").show();1.2通过控制宽高，透明度，display属性逐渐显示，指定时间现实完毕
$(‘div‘).show(3000);
1.3特定参数类型
$("div").show("slow");参数:
slow:600ms
normal:400ms
fast:200ms
1.4动画执行完毕，立即执行回调函数
//show(毫秒值，回调函数; ???$("div").show(5000,function () { ???????alert("动画执行完毕！"); ???});2.隐藏动画
代码和显示动画类似
???$(selector).hide(); ???$(selector).hide(1000); ????$(selector).hide("slow"); ???$(selector).hide(1000, function(){});3.开关显示隐藏动画
$(‘#box‘).toggle(3000,function(){});4.滑入和滑出动画效果
滑入，这里默认值是400ms
$(selector).slideDown(speed, 回调函数);
滑出
$(selector).slideUp(speed, 回调函数);
滑入滑出切换动画效果
$(selector).slideToggle(speed, 回调函数);
5.淡入淡出动画效果
淡入效果
$(selector).fadeIn(speed, callback);
淡出效果
$(selector).fadeOut(1000);
淡入淡出效果
$(selector).fadeToggle(‘fast‘, callback);
6.自定义动画
可以执行一组css属性的自定义动画
$(selector).animate({params}, speed, callback);第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）
7.停止动画
$(selector).stop(true, false);
代码含义
第一个参数：true：后续动画不执行。false：后续动画会执行。第二个参数：true：立即执行完成当前动画。false：立即停止当前动画。
代码演示
自定义动画：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????div { ???????????position: absolute; ???????????left: 20px; ???????????top: 30px; ???????????width: 100px; ???????????height: 100px; ???????????background-color: green; ???????} ???</style> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????jQuery(function () { ???????????$("button").click(function () { ???????????????var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; ???????????????var json2 = { ???????????????????"width": 100, ???????????????????"height": 100, ???????????????????"left": 100, ???????????????????"top": 100, ???????????????????"border-radius": 100, ???????????????????"background-color": "red" ???????????????}; ???????????????//自定义动画 ???????????????$("div").animate(json, 1000, function () { ???????????????????$("div").animate(json2, 1000, function () { ???????????????????????alert("动画执行完毕！"); ???????????????????}); ???????????????}); ???????????}) ???????}) ???</script></head><body><button>自定义动画</button><div></div></body></html>停止动画效果（很经典的一个案例）
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????ul { ???????????list-style: none; ???????} ???????.wrap { ???????????width: 330px; ???????????height: 30px; ???????????margin: 100px auto 0; ???????????padding-left: 10px; ???????????background-color: pink; ???????} ???????.wrap li { ???????????background-color: green; ???????} ???????.wrap > ul > li { ???????????float: left; ???????????margin-right: 10px; ???????????position: relative; ???????} ???????.wrap a { ???????????display: block; ???????????height: 30px; ???????????width: 100px; ???????????text-decoration: none; ???????????color: #000; ???????????line-height: 30px; ???????????text-align: center; ???????} ???????.wrap li ul { ???????????position: absolute; ???????????top: 30px; ???????????display: none; ???????} ???</style> ???<script src="jquery-3.3.1.js"></script> ???<script> ???????//入口函数 ???????$(document).ready(function () { ???????????//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。 ???????????var jqli = $(".wrap>ul>li"); ???????????//绑定事件 ???????????jqli.mouseenter(function () { ???????????????$(this).children("ul").stop().slideDown(1000); ???????????}); ???????????//绑定事件(移开隐藏) ???????????jqli.mouseleave(function () { ???????????????$(this).children("ul").stop().slideUp(1000); ???????????}); ???????}); ???</script></head><body><div class="wrap"> ???<ul> ???????<li> ???????????<a href="javascript:void(0);">一级菜单1</a> ???????????<ul> ???????????????<li><a href="javascript:void(0);">二级菜单2</a></li> ???????????????<li><a href="javascript:void(0);">二级菜单3</a></li> ???????????????<li><a href="javascript:void(0);">二级菜单4</a></li> ???????????</ul> ???????</li> ???????<li> ???????????<a href="javascript:void(0);">二级菜单1</a> ???????????<ul> ???????????????<li><a href="javascript:void(0);">二级菜单2</a></li> ???????????????<li><a href="javascript:void(0);">二级菜单3</a></li> ???????????????<li><a href="javascript:void(0);">二级菜单4</a></li> ???????????</ul> ???????</li> ???????<li> ???????????<a href="javascript:void(0);">三级菜单1</a> ???????????<ul> ???????????????<li><a href="javascript:void(0);">三级菜单2</a></li> ???????????????<li><a href="javascript:void(0);">三级菜单3</a></li> ???????????????<li><a href="javascript:void(0);">三级菜单4</a></li> ???????????</ul> ???????</li> ???</ul></div></body></html>动画潜入浅出效果：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: green; ???????} ???</style></head><body> ???<button id="show">显示</button> ???<button id="hide">隐藏</button> ???<button id="qiehuan">切换</button> ???????<div class="box"> ?????</div> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????// $(‘.box‘).css(‘display‘,‘block‘); ???????????$(‘#show‘).click(function(){ ???????????????$(‘.box‘).show(3000); ???????????????}); ???????????}); ???????????$(‘#hide‘).click(function(){ ???????????????$(‘.box‘).hide(3000); ???????????}); ???????????$(‘#qiehuan‘).click(function(){ ???????????????$(‘.box‘).toggle(3000); ???????????}) ???????</script> ???</body></html>动画卷帘门效果：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: green; ???????????display: none; ???????} ???</style></head><body> ???<button id="show">滑入</button> ???<button id="hide">滑出</button> ???<button id="qiehuan">切换</button> ???<div class="box"> ???????????</div> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????????????$(function(){ ???????????$(‘#show‘).click(function(){ ???????????????$(‘.box‘).slideDown(1000); ???????????}); ???????????$(‘#hide‘).click(function(){ ???????????????$(‘.box‘).slideUp(1000); ????????????}); ???????????$(‘#qiehuan‘).click(function(){ ???????????????????$(‘.box‘).slideToggle(1000); ???????????}) ???????}) ???</script> ???</body></html>36.前端jQuery之动画操作及相关演示
原文地址：https://www.cnblogs.com/LearningOnline/p/9127137.html