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 ????????????width: 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" /></a></li>74 ????????<li><a href="#"><img src="images/02.jpg" /></a></li>75 ????????<li><a href="#"><img src="images/03.jpg" /></a></li>76 ????????<li><a href="#"><img src="images/04.jpg" /></a></li>77 ????????<li><a href="#"><img src="images/05.jpg" /></a></li>78 ????????<li><a href="#"><img src="images/06.jpg" /></a></li>79 ????</ul>80 </div>81 </body>82 </html>多段动画的用法：
1.同时指向多种动画例子：
1 ????????????????// 写在一起2 ????????????????$(this).animate({3 ????????????????????height:"0px",4 ????????????????????opacity:0.45 ????????????????},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>JQuery--动画队列以及清空队列.stop()方法
原文地址：http://www.cnblogs.com/mrszhou/p/7780136.html