1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 ul { 13 list-style: none; 14 } 15 16 body { 17 background: #000; 18 } 19 20 .wrap { 21 margin: 100px auto 0; 22 630px; 23 height: 394px; 24 padding: 10px 0 0 10px; 25 background: #000; 26 overflow: hidden; 27 border: 1px solid #fff; 28 } 29 30 .wrap li { 31 float: left; 32 margin: 0 10px 10px 0; 33 } 34 35 .wrap img { 36 display: block; 37 border: 0; 38 } 39 </style> 40 <script src="lib/jquery-1.12.2.js"></script> 41 <script> 42 // 当鼠标移入li分区时，图片突出显示 43 // 当鼠标移出li分区时，图片变回正常 44 /* 需要添加事件实现排他的时候，尽量添加给有兄弟关系的标签身上 */ 45 /** 46 * 动画队列 47 * 动画队列其实JQ动画的特点，只不过有时候这特特点很多时候不需要， 48 * 所以我们要清空动画队列，实现效果 49 * 50 * 清空队列 51 * 核心函数： 52 * .stop() 53 * 默认值： 54 * .stop(true,false) 55 * // 第一个参数：是否清除队列 56 * // 第二个参数：是否跳转到最终效果 57 * 58 * */ 59 $(function () { 60 $('li').mouseenter(function () { 61 62 $(this).stop().siblings().stop().fadeTo(400,0.4); 63 $(this).fadeTo(400,1); 64 }) 65 $('.wrap').mouseleave(function () { 66 $('.wrap li').stop().fadeTo(400,1); 67 }); 68 }); 69 </script> 70 </head> 71 <div class="wrap"> 72 <ul> 73 <li><a href="#"><img src="images/01.jpg" alt=""/></a></li> 74 <li><a href="#"><img src="images/02.jpg" alt=""/></a></li> 75 <li><a href="#"><img src="images/03.jpg" alt=""/></a></li> 76 <li><a href="#"><img src="images/04.jpg" alt=""/></a></li> 77 <li><a href="#"><img src="images/05.jpg" alt=""/></a></li> 78 <li><a href="#"><img src="images/06.jpg" alt=""/></a></li> 79 </ul> 80 </div> 81 </body> 82 </html>
多段动画的用法：
1.同时指向多种动画例子：
1 // 写在一起 2 $(this).animate({ 3 height:"0px", 4 opacity:0.4 5 },2000);
2.执行队列动画
1 <script src="lib/jquery-1.12.2.js"></script> 2 <script> 3 $(document).ready(function () { 4 $('.btn').click(function () { 5 $('.con').animate({bottom:-165}) 6 .animate({right:-320},function () { 7 alert('请继续保持开机时间'); 8 }); 9 }); 10 }); 11 </script>