所有的jQuery动画函数都会自动排队！
(1)隐藏和显示动画——修改width/height/opacity
$(..).show(speed, fn)
$(..).hide(speed, fn)
$(..).toggle(speed, fn)
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 7 <button id="bt1">显示P元素</button> 8 <button id="bt2">隐藏P元素</button> 9 <button id="bt3">切换P元素的隐藏和显示</button> 10 11 <br><br> 12 <p style="border: 1px solid #aaa;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quasi necessitatibus iste ipsa atque optio quia dicta quae non sed quas rerum facere sapiente. Sit saepe tenetur autem ducimus temporibus.</p> 13 14 <script src= "js/jquery-1.11.3.js"></script> 15 <script> 16 $('#bt2').click(function(){ 17 //$('p').hide(); 18 //$('p').hide('slow'); 19 //$('p').hide('fast'); 20 //$('p').hide('normal'); 21 $('p').hide(5000, function(){ 22 console.log('隐藏完成'); 23 }); 24 }); 25 26 27 $('#bt1').click(function(){ 28 $('p').show(5000, function(){ 29 console.log('显示完成'); 30 }); 31 }); 32 33 $('#bt3').click(function(){ 34 $('p').toggle(3000); 35 }); 36 </script> 37 </body> 38 </html>
(2)淡入/淡出动画——修改opacity
$(..).fadeOut( ) //淡出
$(..).fadeIn( ) //淡入
$(..).fadeToggle( )
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 <img src="img/star.png" alt=""> 7 8 <script src= "js/jquery-1.11.3.js"></script> 9 <script> 10 $('img').click(function(){ 11 //$(this).fadeOut(); 12 //$(this).fadeOut('slow'); 13 //$(this).fadeOut(5000); 14 $(this).fadeOut(5000, function(){ 15 console.log('淡出动画结束'); 16 }); 17 18 $(this).fadeIn(5000); 19 }); 20 </script> 21 </body> 22 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 .tabs ul { 6 list-style: none; 7 margin: 0; 8 padding: 0; 9 margin-bottom: 20px; 10 } 11 .tabs ul li { 12 display: inline-block; 13 padding: 8px 16px; 14 border-bottom: 1px solid #aaa; 15 } 16 .tabs ul li.active { 17 border: 1px solid #aaa; 18 border-bottom: none; 19 20 } 21 .tabs ul li a{ 22 color: #000; 23 text-decoration: none; 24 } 25 .tabs .tab { 26 position: absolute; 27 display: none; 28 } 29 .tabs .tab.active { 30 display: block; 31 } 32 </style> 33 </head> 34 <body> 35 36 <div class="tabs"> 37 <ul> 38 <li><a href="#tc10">十元套餐</a></li> 39 <li class="active"><a href="#tc20">二十元套餐</a></li> 40 <li><a href="#tc30">三十元套餐</a></li> 41 </ul> 42 <div class="tab" id="tc10"> 43 十元套餐详情： 44 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis repellendus accusantium quibusdam quisquam commodi cumque consequatur quis numquam beatae minus fugit odio ab rem perspiciatis ex fugiat placeat dolores?</p> 45 </div> 46 <div class="tab active" id="tc20"> 47 二十元套餐详情： 48 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore enim vel optio provident autem illum porro quae adipisci iusto hic architecto quisquam. Veniam voluptatibus delectus illum ut facere. Ducimus porro?</p> 49 </div> 50 <div class="tab" id="tc30"> 51 三十元套餐详情： 52 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum praesentium aut perspiciatis molestiae? Ducimus quibusdam illum incidunt quam unde minus neque vero quos non asperiores impedit dolor ullam accusamus cum.</p> 53 </div> 54 </div> 55 56 <script src= "js/jquery-1.11.3.js"></script> 57 <script> 58 $('ul li a').on('click',function(e){ 59 e.preventDefault(); 60 $(this).parent().siblings('.active').removeClass('active'); 61 $(this).parent().addClass('active'); 62 $($(this).attr('href')).siblings('.active').fadeOut(500).removeClass('active'); 63 $($(this).attr('href')).fadeIn(500).addClass('active'); 64 65 }); 66 /*$('.tabs ul li a').click(function(e){ 67 e.preventDefault(); 68 //修改页头的active的位置 69 $(this).parent().addClass('active').siblings('.active').removeClass('active'); 70 71 //修改标签页的active 72 var id = $(this).attr('href'); 73 $('.tabs .tab.active').fadeOut(500); 74 $(id).fadeIn(500); 75 }); 76 */ 77 </script> 78 </body> 79 </html>
(3)折叠展开/收起动画——修改的height
$(..).slideUp( ) 向上收起
$(..).slideDown( ) 向下显示
$(..).slideToggle( )
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 7 <button id="bt1">向下显示P元素</button> 8 <button id="bt2">向上收起P元素</button> 9 <button id="bt3">切换P元素的隐藏和显示</button> 10 11 <br><br> 12 <p style="border: 1px solid #aaa;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quasi necessitatibus iste ipsa atque optio quia dicta quae non sed quas rerum facere sapiente. Sit saepe tenetur autem ducimus temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore incidunt esse eum magnam expedita suscipit praesentium fugit enim? Nesciunt possimus minima labore eligendi aspernatur temporibus ea dignissimos natus voluptate in.</p> 13 14 <script src= "js/jquery-1.11.3.js"></script> 15 <script> 16 $('#bt2').click(function(){ 17 //$('p').slideUp(); 18 //$('p').slideUp('slow'); 19 $('p').slideUp(500); 20 }); 21 $('#bt1').click(function(){ 22 $('p').slideDown(500, function(){ 23 console.log('展开完成') 24 }); 25 }); 26 $('#bt3').click(function(){ 27 $('p').slideToggle(500); 28 }); 29 </script> 30 </body> 31 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 .accordion > h3 { 6 background: #ddd; 7 padding: 6px 15px; 8 cursor: pointer; 9 } 10 .accordion > div { 11 display: none; 12 } 13 .accordion > div.active { 14 display: block; 15 } 16 </style> 17 </head> 18 <body> 19 20 <div class="accordion"> 21 <h3>西游记简介</h3> 22 <div class="active">详情: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis omnis odio cupiditate sunt necessitatibus nam a dicta ipsum fugiat sed aspernatur aliquam adipisci quas. Tempore optio quaerat libero deserunt fugiat.</div> 23 24 <h3>三国志简介</h3> 25 <div>详情: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eum reiciendis libero accusamus commodi asperiores eligendi quos optio ut ab facilis sapiente quibusdam ducimus. Recusandae ratione quasi aliquam nostrum facere? </div> 26 27 <h3>水浒传简介</h3> 28 <div>详情: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem deserunt similique laborum numquam mollitia nesciunt quidem repellat assumenda. Cum ab doloribus maiores consequuntur accusamus dolores veniam neque explicabo repellat blanditiis.</div></div> 29 30 31 <script src= "js/jquery-1.11.3.js"></script> 32 <script> 33 $('.accordion').on('click','h3',function(){ 34 $(this).siblings('.active').slideUp(500).removeClass('active'); 35 $(this).next().slideDown(500).addClass('active'); 36 }); 37 /*$('.accordion > h3').click(function(){ 38 $(this).next().slideDown(1000, function(){ 39 $(this).addClass('active'); 40 }); 41 42 $(this).siblings('.active').slideUp(1000, function(){ 43 $(this).removeClass('active'); 44 }); 45 }) 46 */ 47 </script> 48 </body> 49 </html>
(4)万能动画函数——修改任意合法的属性
animate函数只能对数值型的属性执行定时器动画（如宽、高、透明度、位置...），
非数值型属性不能执行动画（如display、border-style、text-decoration）；默认情况下，不能对颜色相关属性执行动画！
$(..).animate( {
'300%',
height: '30%',
opacity: '0.6',
left: '300px'
} , 1000, fn)
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 img { 6 position: relative; 7 } 8 </style> 9 </head> 10 <body> 11 <img src="img/star.png" id="star1"> 12 <img src="img/star.png" id="star2"> 13 <img src="img/star.png" id="star3"> 14 <img src="img/star.png" id="star4"> 15 16 17 <script src= "js/jquery-1.11.3.js"></script> 18 <script> 19 //创建一个小星星，点击后，从屏幕左边移动到右边 20 $('#star1').click(function(){ 21 //$(this).animate({ 22 // left: '1000px' 23 //}, 3000); //swing 24 $(this).animate({ 25 left: '1000px' 26 }, 3000, 'linear') 27 }); 28 29 //创建一个小星星，点击后，从屏幕上边移动到下边 30 $('#star2').click(function(){ 31 $(this).animate({ 32 top: '600px' 33 }, 3000); 34 }); 35 36 //创建一个小星星，点击后，从屏幕左上角走斜线移动到右下角 37 $('#star3').click(function(){ 38 $(this).animate({//并发动画——同时修改多个属性 39 left: '600px', 40 top: '600px' 41 }, 3000); 42 }); 43 44 //创建一个小星星，点击后，从屏幕左边移动到右边，再移动到下边 45 $('#star4').click(function(){ 46 $(this).animate({ //排队动画 47 left: '600px' 48 }, 3000); 49 50 $(this).animate({ 51 top: '600px' 52 }, 3000); 53 }); 54 </script> 55 </body> 56 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 img { 6 position: absolute; 7 } 8 </style> 9 </head> 10 <body> 11 12 13 <script src= "js/jquery-1.11.3.js"></script> 14 <script> 15 //创建满天随机小星星(大小和位置都随机)，点击一 16 //颗后，它变大变淡，最后从文档中消失 17 for(var i=0; i<15; i++){ 18 $('<img src="img/star.png">').css('width',rn(30,300)+'px').css('left', rn(0, 600)+'px').css('top', rn(0, 600)+'px').appendTo(document.body); 19 20 } 21 22 //使用事件代理，为star添加单击监听函数 23 $('body').on('click','img', function(){ 24 //this => img 25 $(this).animate({ //并发动画 26 '200%', 27 opacity: 0 28 }, 3000, function(){ 29 $(this).remove(); //动画结束后删除看不见的星星 30 }) 31 }) 32 33 34 35 //返回指定范围内的随机数 random number 36 function rn(min, max){ 37 return Math.floor(Math.random()*(max-min) + min); 38 } 39 </script> 40 </body> 41 </html>
前端实现动画的技术有哪些？
(1)CSS3 Transition
(2)CSS3 Keyframes
(3)JS 定时器： setInterval 或 setTimeout 修改样式
jQuery1&2用的是一次性定时器
(4)requestAnimationFrame —— 效率最高
jQuery3用的是requestAnimationFrame