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;