自定义动画animate
语法:
animate(params, speed, callback);
1.自定义简单动画
1 $(function () { 2 $("#panel").click(function () { 3 $(this).animate({left:"500px"},3000); 4 }); 5 });
2.累加, 累减动画
在之前的代码中,设置{left:"500px"}作为动画参数.如果在500px之前加上"+="或者"-="符号即表示在当前位置累加或者累减.
1 $(function () { 2 $("#panel").click(function () { 3 $(this).animate({left:"+=500px"},3000); 4 }); 5 });
3.多重动画
同时执行多个动画.
1 $(function () { 2 $("#panel").click(function () { 3 $(this).animate({left:"+=500px",height:"+=50px"},3000); 4 }); 5 });
4.按顺序执行多个动画
animate是按顺序执行的动画.
1 $(this).animate({left:"500px"},3000) 2 .animate({height:"500px"},3000);
这样的动画效果的执行具有先后顺序,称为"动画队列".
5.综合动画
1 $(function () { 2 $("#panel").css("opacity",".5");//设置不透明度 3 $("#panel").click(function () { 4 $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) 5 .animate({top:"200px",width:"200px"},3000) 6 .fadeOut("slow"); 7 }); 8 });
运行代码后, 动画效果一共执行了三步,从这个例子可以看出, 为同一元素应用多重效果时, 可以通过链式方式对这些效果进行排队.
6.动画回调函数
1 $(function () { 2 $("#panel").css("opacity",".5");//设置不透明度 3 $("#panel").click(function () { 4 $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) 5 .animate({top:"200px",width:"200px"},3000,function () { 6 $(this).css("border","5px solid blue"); 7 }); 8 //.fadeOut("slow"); 9 //.css("border","5px solid blue"); 10 /*** 11 * .fadeOut("slow");修改.css("border","5px solid blue"); 12 * 预期效果是在动画的最后一步改变元素的样式, 而实际效果是, 刚刚开始执行动画的时候, css()方法就被执行. 13 * 原因:css()方法并不会加入到动画队列中,而是立即执行. 14 * 可以使用回调函数对非动画方法实现排队.只要把css()方法下载最后一个动画的回调函数里面即可. 15 */ 16 }); 17 });
callback回调函数适用于jQuery所有动画效果方法.
停止动画和判断是否处于动画状态
1.停止元素的动画.
选多时候需要停止匹配元素正在进行的动画, 如果需要在某处停止动画, 需要使用stop()方法.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 #panel{position:relative;width:100px;height:100px;border:1px solid gold;background-color:darkkhaki;cursor:pointer;} 8 </style> 9 </head> 10 <body> 11 <div id="panel"></div> 12 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 /*** 16 * stop([clearQueue][,gotoEnd]); 17 * clearQueue:清空队列 === 是否要清空未执行完的动画队列 18 * gotoEnd:到终点 ===是否直接将正在执行的动画跳转到末状态 19 * 这两个参数都是可选参数.为布尔值. 20 * 如果直接使用stop()方法, 则会立即停止当前正在进行的动画. 21 * 如果接下来还有动画等待继续进行, 则以当前状态开始接下来的动画. 22 * 经常会遇到这种情况,在为一个元素绑定hover事件之后, 用户把光标移入元素时会触发动画效果, 而当这个动画还没有结束时,用户就将光标移出这个元素了, 23 * 那么光标移出的红花效果将会被放进队列之中,等待光标移入动画结束后在执行. 24 * 因此, 如果光标移入移出得过快就会导致动画效果和光标的动作不一致. 25 * 此时,只要在光标的移入,移出动画之前加入stop()方法,就能解决这个问题.stop()方法会结束当前正在进行的动画, 并立即执行队列中的下一个动画. 26 */ 27 $("#panel").hover(function(){ 28 $(this).stop() 29 .animate({height: "150px", width: "300px" }, 200); 30 },function () { 31 $(this).stop() 32 .animate({height: "22px", width: "60px" }, 300); 33 }); 34 }); 35 </script> 36 </body> 37 </html>
stop(true, true)使用:
1 /*** 2 * gotoEnd:到终点 ===是否直接将正在执行的动画跳转到末状态 3 * 通常用于后一个动画需要基于前一个动画的末状态的情况.可以通过stop(false, true)这种方式来让当前动画直接到达末状态. 4 * 当然也可以两者结合起来使用stop(true, true), 即停止当前动画并直接到达当前动画的末状态, 并清空动画队列. 5 * jQuery只能设置正在执行的动画的最终状态,而没有提供直接到达未执行订花队列最终状态的方法. 6 */ 7 $("div.content").stop(true, true) 8 .animate({width: "300px"}, 200) 9 .animate({height: "150px"}, 300) 10 .animate({opacity: "0.2"}, 2000);
判断元素是否处于动画状态
在使用animate()方法的时候, 要避免动画基类而导致的动画与用户的行为不一致.
当用户快速在某个元素上执行animate()动画时, 就会出现动画积累.解决方法就是判断元素是否正在处于动画状态, 如果元素不处于动画状态, 才伪元素添加新的动画.否则不添加.
1 if(!$("div.content").is(":animated")){ //判断元素是否处于动画状态 2 //如果当前没有进行动画, 则添加新动画 3 }
视频展示例子:
效果截图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>videoshow</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 body{background-color:#FFF;color:#FFF;font:12px/1.5em Helvetica,Arial,sans-serif;} 9 h1,h2,h3,h4,h5,h6{font-size:1em;} 10 a{color:#2B93D2;text-decoration:none;} 11 a:hover{color:#E31E1C;text-decoration:none;} 12 ul,li{list-style:none;} 13 fieldset,img{border:none;} 14 .v_show{width:595px;margin:20px 0 1px 60px;} 15 .v_caption{height:35px;background:url(img/btn_cartoon.gif) no-repeat 0 0;overflow:hidden;} 16 .v_caption h2{float:left;width:84px;height:35px;background:url(img/btn_cartoon.gif) no-repeat;text-indent:-9999px;} 17 .v_caption .cartoon{background-position:0 -100px;} 18 .v_caption .variety{background-position:-100px -100px;} 19 .highlight_tip{display:inline;float:left;margin:14px 0 0 10px;} 20 .highlight_tip span{display:inline;float:left;width:7px;height:7px;overflow:hidden;margin:0 2px;background:url(img/btn_cartoon.gif) no-repeat 0 -320px;text-indent:-9999px;} 21 .highlight_tip .current{background-position:0 -220px;} 22 .change_btn{float:left;margin:7px 0 0 10px; } 23 .change_btn span{display:block; float:left; width:30px; height:23px; overflow:hidden;background:url(img/btn_cartoon.gif) no-repeat;text-indent:-9999px;cursor:pointer;} 24 .change_btn .prev{background-position:0 -400px;} 25 .change_btn .next{width:31px;background-position:-30px -400px;} 26 .v_caption em{display:inline;float:right;margin:10px 12px 0 0;font-family:simsun;} 27 .v_content{position:relative;width:592px;height:160px;overflow:hidden;border-right:1px solid #E7E7E7;border-bottom:1px solid #E7E7E7;border-left:1px solid #E7E7E7;} 28 .v_content_list{position:absolute;width:2500px;top:0px;left:0px;} 29 .v_content ul{float:left;} 30 .v_content ul li{display:inline;float:left;margin:10px 2px 0;padding:8px;background:url(img/v_bg.gif) no-repeat;} 31 .v_content ul li a{display:block;width:128px;height:80px;overflow:hidden;} 32 .v_content ul li img{width:128px;height:96px; } 33 .v_content ul li h4{width:128px;height:18px;overflow:hidden;margin-top:12px;font-weight:normal;} 34 .v_content ul li h4 a{display:inline !important;height:auto !important;} 35 .v_content ul li span{color:#666;} 36 .v_content ul li em{color:#888;font-family:Verdana;font-size:0.9em;} 37 </style> 38 </head> 39 <body> 40 <div class="v_show"> 41 <div class="v_caption"> 42 <!--头部标题, 按钮等--> 43 <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> 44 <div class="highlight_tip"> 45 <span class="current">1</span> 46 <span>2</span> 47 <span>3</span> 48 <span>4</span> 49 </div> 50 <div class="change_btn"> 51 <span class="prev">上一页</span> 52 <span class="next">下一页</span> 53 </div> 54 <em><a href="#">更多</a></em> 55 </div> 56 <div class="v_content"> 57 <!--视频内容展示区域--> 58 <div class="v_content_list"> 59 <ul> 60 <li><a href=""><img src="img/01.jpg" alt="海贼王"></a><h4><a href="">海贼王</a></h4><span>播放:<em>28,276</em></span></li> 61 <li><a href=""><img src="img/01.jpg" alt="海贼王"></a><h4><a href="">海贼王</a></h4><span>播放:<em>28,276</em></span></li> 62 <li><a href=""><img src="img/01.jpg" alt="海贼王"></a><h4><a href="">海贼王</a></h4><span>播放:<em>28,276</em></span></li> 63 <li><a href=""><img src="img/01.jpg" alt="海贼王"></a><h4><a href="">海贼王</a></h4><span>播放:<em>28,276</em></span></li> 64 <li><a href=""><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> 65 <li><a href=""><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> 66 <li><a href=""><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> 67 <li><a href=""><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> 68 <li><a href=""><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> 69 <li><a href=""><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> 70 <li><a href=""><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> 71 <li><a href=""><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> 72 <li><a href=""><img src="img/04.jpg" alt="龙珠"></a><h4><a href="">龙珠</a></h4><span>播放:<em>57,865</em></span></li> 73 <li><a href=""><img src="img/04.jpg" alt="龙珠"></a><h4><a href="">龙珠</a></h4><span>播放:<em>57,865</em></span></li> 74 <li><a href=""><img src="img/04.jpg" alt="龙珠"></a><h4><a href="">龙珠</a></h4><span>播放:<em>57,865</em></span></li> 75 <li><a href=""><img src="img/04.jpg" alt="龙珠"></a><h4><a href="">龙珠</a></h4><span>播放:<em>57,865</em></span></li> 76 </ul> 77 </div> 78 </div> 79 </div> 80 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 81 <script type="text/javascript"> 82 $(function () { 83 var page = 1; 84 var i = 4;//每版放4张图片 85 //向后按钮 86 $("span.next").click(function () { 87 var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 88 var $v_show = $parent.find("div.v_content_list");//找到视频内容展示区域 89 var $v_content = $parent.find("div.v_content");//找到视频内容展示区域外围div元素 90 var v_width = $v_content.width(); 91 var len = $v_show.find("li").length; 92 var page_count = Math.ceil(len / i);//只要不是整数, 就往大的方向取最小整数 93 if(!$v_show.is(":animated")){///判断视频内容展示区域是否正在处于动画 94 if(page == page_count){//已经到最后一个页面了,如果再往后,必须跳转到第一个页面 95 $v_show.animate({left: "0px"},"slow");//通过改变left的值,条转到一个版面 96 page = 1; 97 }else{ 98 $v_show.animate({left: '-='+v_width},"slow");//通过改变left的值,达到每次换一个页面 99 page++; 100 } 101 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); 102 } 103 }); 104 //往前按钮 105 $("span.prev").click(function(){ 106 var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 107 var $v_show = $parent.find("div.v_content_list");//找到视频内容展示区域 108 var $v_content = $parent.find("div.v_content");//找到视频内容展示区域外围div元素 109 var v_width = $v_content.width(); 110 var len = $v_show.find("li").length; 111 var page_count = Math.ceil(len / i);//只要不是整数, 就往大的方向取最小整数 112 if(!$v_show.is(":animated")){///判断视频内容展示区域是否正在处于动画 113 if(page == 1){//已经到第一个页面了,如果再往前,必须条转到最后一个版面 114 $v_show.animate({left: '-='+v_width*(page_count-1)}, "slow"); 115 page = page_count; 116 }else{ 117 $v_show.animate({left: "+="+v_width},"slow"); 118 page--; 119 } 120 $parent.find("span").eq(page-1).addClass("current").siblings().removeClass("current"); 121 } 122 }); 123 }); 124 </script> 125 </body> 126 </html>
