1. 基本效果
show([s,[e],[fn]]) ???????显示隐藏的匹配元素hide([s,[e],[fn]]) ???????隐藏显示的元素toggle([s],[e],[fn]) ???如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的参数详解
speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn ???????: 在动画完成时执行的函数，每个元素执行一次。2. 滑动效果
slideDown([s],[e],[fn]) ???????通过高度变化（向下增大）来动态地显示所有匹配的元素slideUp([s,[e],[fn]]) ???????通过高度变化（向上减小）来动态地隐藏所有匹配的元素slideToggle([s],[e],[fn]) ???通过高度变化来切换所有匹配元素的可见性
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>滚动播放</title> ???<style> ???????body { ???????????background:#ccc; ???????} ???????#box { ???????????margin:100px auto; ???????????width: 1000px; ???????????height: 460px; ???????????background:#ccc; ???????????overflow: hidden; ???????} ???????ul { ???????????list-style:none; ???????????padding:0; ???????????margin:0; ???????} ???????p { ???????????margin:0; ???????} ???????#box li { ???????????height:100px; ???????????margin-bottom:20px; ???????????background: #fff ???????} ???????#box li img{ ???????????float:left; ???????????width:100px; ???????????height: 100px; ???????} ???????#box li p { ???????????float:right; ???????????width:850px; ???????????line-height: 100px; ???????????height:100px; ???????} ???</style></head><body> ???<div id="box"> ???????<ul id="newsList"> ???????????<li> ???????????????<img src="../../dist/images_one/meinv02.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/1.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/2.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/3.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/4.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/11.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/10.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/9.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????????<li> ???????????????<img src="../../dist/images_one/8.jpg" alt=""> ???????????????<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p> ???????????</li> ???????</ul> ???</div> ???<script src="../jquery-3.3.1.js"></script> ???<script> ???????$(function(){ ???????????setInterval(function(){ ???????????????$(‘#box li‘).eq(3).fadeTo(500, 0, function(){ ???????????????????$(‘#box li‘).last().fadeTo(0,1).hide().prependTo(‘#newsList‘).slideDown(); ???????????????}) ???????????}, 2000) ???????}) ???</script></body></html>参数详解
speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn ???????: 在动画完成时执行的函数，每个元素执行一次。3 淡入淡出效果
fadeIn([s],[e],[fn]) ???????通过不透明度的变化来实现所有匹配元素的淡入效果fadeOut([s],[e],[fn]) ???????通过不透明度的变化来实现所有匹配元素的淡出效果fadeToggle([s,[e],[fn]]) ???通过不透明度的变化来开关所有匹配元素的淡入和淡出效果fadeTo([[s],o,[e],[fn]]) ???把所有匹配元素的不透明度以渐进方式调整到指定的不透明度参数详解
speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn ???????: 在动画完成时执行的函数，每个元素执行一次。opacity ???: (用户fadeTo)一个0至1之间表示透明度的数字。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????#box { ???????????width: 300px; ???????????border: 2px solid pink; ???????} ???????img { ???????????width: 300px; ???????} ???</style></head><body> ???<h1>动画效果</h1> ???<hr> ???<button id="hide_btn">隐藏</button> ???<button id="show_btn">显示</button> ???<button id="toggle_btn">切换</button> ???<br> ???<button id="slideDownBtn">slideDown显示</button> ???<button id="slideUpBtn">slideUp隐藏</button> ???<button id="slideToggleBtn">slideToggle切换</button> ???<br> ???<button id="fadeOutBtn">淡出</button> ???<button id="fadeInBtn">淡入</button> ???<button id="fadeToggleBtn">切换</button> ???<button id="fadeToBtn">fadeTo</button> ???<br> ???<br> ???<br> ????<div id="box"> ???????<img src="../../dist/images_one/10.jpg" alt=""> ???</div> ???<script src="../jquery-3.3.1.js"></script> ???<script> ???????$(function(){ ???????????//淡入淡出效果 ???????????$(‘#fadeOutBtn‘).on(‘click‘, function(){ ???????????????//$(‘#box‘).fadeOut() ???????????????$(‘#box‘).fadeOut(2000) ?// 通过不透明度的变化来实现所有匹配元素的淡出效果，淡出后不再占据位置,k可以设置时间 ???????????}) ???????????$(‘#fadeInBtn‘).on(‘click‘, function(){ ???????????????//$(‘#box‘).fadeOut() ???????????????$(‘#box‘).fadeIn(5000) ??// ?通过不透明度的变化来实现所有匹配元素的淡入效果，可以将淡出的元素在淡入显示出来 ???????????}) ???????????$(‘#fadeToggleBtn‘).on(‘click‘, function(){ ???????????????//$(‘#box‘).fadeOut() ???????????????$(‘#box‘).fadeToggle(2000) ?????// 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,即可以实现淡入淡出的来回切换 ???????????}); ???????????$(‘#fadeToBtn‘).on(‘click‘, function(){ ???????????????/*$(‘#box‘).fadeTo(3000, .5, function(){ ???????????????????console.log(‘fadeTo‘) ???????????????})*/ ???????????????//alert(‘ok‘) ???????????????$(‘#box‘).fadeTo(1000, .5) ????// 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度 ???????????}) ???????????//滑动效果 ???????????$(‘#slideUpBtn‘).on(‘click‘, function(){ ???????????????//$("#box").slideUp(); ???????????????//$("#box").slideUp(‘slow‘); ???????????????//$("#box").slideUp(3000); ???????????????$("#box").slideUp(3000, function(){ ??//将元素向上进行滑动隐藏 ???????????????}); ???????????}); ???????????$(‘#slideDownBtn‘).on(‘click‘, function(){ ???????????????$(‘#box‘).slideDown(5000) ????//将元素进行向下滑动进行显示 ???????????}) ???????????//基本效果 ???????????$(‘#hide_btn‘).click(function(){ ???????????????//$(‘#box‘).hide(); ???????????????//$(‘#box‘).hide(‘fast‘); ???????????????//$(‘#box‘).hide(‘normal‘); ???????????????//$(‘#box‘).hide(‘slow‘); ???????????????//$(‘#box‘).hide(5000); ??????//隐藏显示的元素，以左上角为中心 ???????????????$(‘#box‘).hide(2000, function(){ ???????????????????console.log(‘啊，我隐藏了‘); ???????????????}); ???????????}); ???????????$(‘#show_btn‘).click(function(){ ???????????????$(‘#box‘).show(3000) ?????//显示隐藏的元素 ???????????}); ???????????$(‘#toggle_btn‘).click(function(){ ???????????????$(‘#box‘).toggle(3000, function(){ ?????//元素在显示与隐藏来回进行切换 ???????????????????console.log(‘toggle‘); ???????????????}) ???????????}) ???????}) ???</script></body></html>4 自定义动画
animate(p,[s],[e],[fn])参数详解
params ???: 一组包含作为动画属性和终值的样式属性和及其值的集合speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".fn ???????: 在动画完成时执行的函数，每个元素执行一次。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????#box { ???????????overflow: hidden; ???????????width:400px; ???????????height:200px; ???????????border:2px solid #ccc; ???????????padding:20px; ???????} ???</style></head><body> ???<h1>自定义动画</h1> ???<hr> ???<button id="btn">隐藏</button> ???<button id="btn1">显示</button> ???<button id="btn2">切换</button> ???<hr> ???<div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div> ???<script src="../jquery-3.3.1.js"></script> ???<script> ???????$(function(){ ???????????$(‘#btn‘).click(function(){ ???????????????$(‘#box‘).animate({ ???????????????????‘width‘:‘0px‘, ???????//自定义向左隐藏 ???????????????????‘padding-left‘:‘0px‘, ???????????????????‘padding-right‘:‘0px‘ ???????????????????}, 2000, function(){ ???????????????????$(this).hide(); ???????????????}) ???????????}); ???????????$(‘#btn1‘).click(function(){ ???????????????$(‘#box‘).show().animate({ ???????????????????‘width‘:‘400px‘, ???????????????????‘padding-left‘:‘20px‘, ???????????????????‘padding-right‘:‘20px‘ ???????????????????}, 2000) ???????????}); ???????????$(‘#btn2‘).click(function(){ ???????????????$(‘#box‘).animate({ ???????????????????‘width‘:‘toggle‘, ???????????????????‘padding-left‘:‘toggle‘, ???????????????????‘padding-right‘:‘toggle‘ ???????????????????}, 2000) ???????????}) ???????}) ???</script></body></html>5 动画控制
stop([c],[j]) ???????停止所有在指定元素上正在运行的动画delay(d,[q]) ???????设置一个延时来推迟执行队列中之后的项目finish([queue]) ???????停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????#box { ???????????overflow: hidden; ???????????width:400px; ???????????height:200px; ???????????border:2px solid #ccc; ???????????padding:20px; ???????} ???</style></head><body> ???<h1>动画控制</h1> ???<hr> ???<button id="btn">隐藏</button> ???<button id="btn1">显示</button> ???<button id="btn2">切换</button> ???<br> ???<button id="btn3">动画</button> ???<button id="btn4">finish</button> ???<button id="btn5">stop</button> ???<hr> ???<div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div> ???<script src="../jquery-3.3.1.js"></script> ???<script> ???????$(function(){ ???????????$(‘#btn4‘).on(‘click‘, function() { ???????????????$(‘#box‘).finish(); ???????????}) ???????????$(‘#btn5‘).on(‘click‘, function() { ???????????????$(‘#box‘).stop(); ???????????}) ???????????$(‘#btn3‘).on(‘click‘, function(){ ???????????????//如果 box元素 正在执行 ?return false ???????????????if ($(‘#box‘).is(‘:animated‘)) { ???????????????????return false; ???????????????} ???????????????//动画队列 delay ???????????????$(‘#box‘).slideUp(3000).delay(2000).show(2000).fadeOut(2000).slideDown(3000) ???????????}) ???????????$(‘#btn‘).click(function(){ ???????????????$(‘#box‘).animate({ ???????????????????‘width‘:‘0px‘, ???????????????????‘padding-left‘:‘0px‘, ???????????????????‘padding-right‘:‘0px‘ ???????????????????}, 2000, function(){ ???????????????????$(this).hide(); ???????????????}) ???????????}); ???????????$(‘#btn1‘).click(function(){ ???????????????$(‘#box‘).show().animate({ ???????????????????‘width‘:‘400px‘, ???????????????????‘padding-left‘:‘20px‘, ???????????????????‘padding-right‘:‘20px‘ ???????????????????}, 2000) ???????????}); ???????????$(‘#btn2‘).click(function(){ ???????????????$(‘#box‘).animate({ ???????????????????‘width‘:‘toggle‘, ???????????????????‘padding-left‘:‘toggle‘, ???????????????????‘padding-right‘:‘toggle‘ ???????????????????}, 5000) ???????????}) ???????}) ???</script></body></html>6 设置
//关闭页面上所有的动画jQuery.fx.off = true;jQuery动画
原文地址：https://www.cnblogs.com/sui776265233/p/9534874.html