文章目录
show 和 hidefadeIn 和 fadeOutfadeTogglefadeToslideDown 和 slideUpslideToggleshow 和 hide
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>温故而知"心"</title><style>p {width: 100px;border: 1px solid #ff0000;}ul {list-style: none;display: none;}</style></head><body><div class="demo"><p>hide和show</p><ul><li>11111111111</li><li>22222222222</li><li>33333333333</li></ul></div></body><script src="/jquery/1.12.4/jquery.min.js"></script><script>//show:鼠标移入p标签使ul显示出来/*show和hide：第一个参数：是动画完成过程的时间第二个参数：是运动方式*/$('p').on('mouseenter', function () {$(this).next().show(1000, 'swing')})//hide:鼠标移出ul标签使ul隐藏起来$('.demo').on('mouseleave', function () {$('p').next().hide(3000, 'linear')})</script></html>
fadeIn 和 fadeOut
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>温故而知"心"</title><style>p {width: 100px;border: 1px solid #ff0000;}ul {list-style: none;display: none;}</style></head><body><div class="demo"><p>动画</p><ul><li>11111111111</li><li>22222222222</li><li>33333333333</li></ul></div></body><script src="/jquery/1.12.4/jquery.min.js"></script><script>/*fadeIn : 淡入fadeOut ：淡出这两个都只是改变透明度的。*/$('p').on('click', function () {if ($(this).next().css('display') == 'none') {$(this).next().fadeIn()} else {$(this).next().fadeOut()}})</script></html>
fadeToggle
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>温故而知"心"</title><style>p {width: 100px;border: 1px solid #ff0000;}ul {list-style: none;display: none;}</style></head><body><div class="demo"><p>动画</p><ul><li>11111111111</li><li>22222222222</li><li>33333333333</li></ul></div></body><script src="/jquery/1.12.4/jquery.min.js"></script><script>/*fadeToggle方法：集合了fadeIn（淡入）和fadeOut（淡出）;fadeToggle的第一个参数是：指定变化的时间；*/$('p').on('click', function () {$(this).next().fadeToggle(3000)})</script></html>
fadeTo
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>温故而知"心"</title><style>p {width: 100px;border: 1px solid #ff0000;}ul {list-style: none;display: none;}</style></head><body><div class="demo"><p>动画</p><ul><li>11111111111</li><li>22222222222</li><li>33333333333</li></ul></div></body><script src="/jquery/1.12.4/jquery.min.js"></script><script>/*fadeTo : 运动到（条件）开始执行,这个条件就是第二个参数透明度;第一个参数是：运动的时间;第二个参数是：透明度;第三个参数是：运动方式*/$('p').on('click', function () {if ($(this).next().css('display') == 'none') {$(this).next().fadeTo(1500, 0.7, 'swing', function () {console.log("fadeTo1")})} else {$(this).next().fadeTo(1500, 0.1, 'swing', function () {console.log("fadeTo2")})}})</script></html>
slideDown 和 slideUp
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>温故而知"心"</title><style>p {width: 100px;border: 1px solid #ff0000;}ul {list-style: none;display: none;}</style></head><body><div class="demo"><p>动画</p><ul><li>11111111111</li><li>22222222222</li><li>33333333333</li></ul></div></body><script src="/jquery/1.12.4/jquery.min.js"></script><script>/*slideDown :（卷出：从上到下显示）slideUp : （卷入：从下到上隐藏）*/$('p').on('click', function () {if ($(this).next().css('display') == 'none') {$(this).next().slideDown(1500, 'swing', function () {console.log("slideDown")})} else {$(this).next().slideUp(1500, 'swing', function () {console.log("slideUp")})}})</script></html>
slideToggle
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>温故而知"心"</title><style>p {width: 100px;border: 1px solid #ff0000;}ul {list-style: none;display: none;}</style></head><body><div class="demo"><p>动画</p><ul><li>11111111111</li><li>22222222222</li><li>33333333333</li></ul></div></body><script src="/jquery/1.12.4/jquery.min.js"></script><script>/*slideToggle : 集合了 slideDown :（卷出：从上到下显示）和 slideUp : （卷入：从下到山隐藏）*/$('p').on('click', function () {$(this).next().slideToggle(1500)})</script></html>
