1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 8 9 10 11 .container { 12 width: 960px; 13 margin: 0 auto; 14 overflow: hidden; 15 } 16 17 18 /* Full Width Progress Bar */ 19 20 #content { 21 width: 200px; 22 height: 5px; 23 margin: 50px auto; 24 background: #ccc; 25 border-radius:15px; 26 } 27 28 .fullwidth .expand { 29 width: 200px; 30 height: 1px; 31 margin: 2px 0; 32 /*background: #2187e7;*/ 33 background: #1463ad; 34 position: absolute; 35 box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7); 36 -moz-animation: fullexpand 10s ease-out; 37 -webkit-animation: fullexpand 10s ease-out; 38 } 39 40 @-moz-keyframes fullexpand { 41 0% { 42 width: 0px; 43 } 44 45 100% { 46 width: 200px; 47 } 48 } 49 50 @-webkit-keyframes fullexpand { 51 0% { 52 width: 0px; 53 } 54 55 100% { 56 width: 200px; 57 } 58 } 59 60 61 62 63 /* Trigger button for javascript */ 64 65 .trigger, .triggerFull, .triggerBar { 66 background: #000000; 67 background: -moz-linear-gradient(top, #161616 0%, #000000 100%); 68 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%); 69 border-left: 1px solid #111; 70 border-top: 1px solid #111; 71 border-right: 1px solid #333; 72 border-bottom: 1px solid #333; 73 font-family: Verdana, Geneva, sans-serif; 74 font-size: 0.8em; 75 text-decoration: none; 76 text-transform: lowercase; 77 text-align: center; 78 color: #fff; 79 padding: 10px; 80 border-radius: 3px; 81 display: block; 82 margin: 0 auto; 83 width: 140px; 84 } 85 86 .trigger:hover, .triggerFull:hover, .triggerBar:hover { 87 background: -moz-linear-gradient(top, #202020 0%, #161616 100%); 88 background: -webkit-linear-gradient(top, #202020 0%, #161616 100%); 89 } 90 </style> 91 <script src="/js/jquery-1.8.3-min.js"></script> 92 <script> 93 94 95 $(document).ready(function () { 96 //多久之后开始执行 97 var duration = 10; 98 99 $('#content').removeClass('fullwidth'); 100 $('.triggerFull').click(function () { 101 //清除使用了 finish() 方法之后的样式 102 $(".expand").removeAttr("style"); 103 $('#content').removeClass('fullwidth').delay(duration).queue(function (next) { 104 $(this).addClass('fullwidth'); 105 next(); 106 }); 107 return false; 108 }); 109 }); 110 111 function finish() 112 { 113 $(".fullwidth .expand").css({ "-moz-animation": "fullexpand 1s ease-out", "-webkit-animation": "fullexpand 1s ease-out" }); 114 115 }119 </script> 120 </head> 121 <body> 122 <!-- FULL WIDTH --> 123 <div id="content"> 124 <span class="expand"></span> 125 </div> 126 <a class="triggerFull" href="#">Start/Restart Animation</a> 127 <!-- END FULL WIDTH --> 128 129 130 <input type="button" value="finish" onclick="finish()" /> 132 133 </body> 134 </html>