4.2 《锋利的jQuery》jQuery中的动画
问题:queue()方法?
tip0:
jquery从1.9版本以上就不支持toggle()方法。
// $("#panel h5.head").toggle(function(){ // ... // },function(){ // ... // });
以上不支持!以下支持
// $("#panel h5.head").click(function(){ // $(this).next().toggle(); // });
tip1:
用jquery做动画效果要求在标准模式下,否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tip2:
jquery 中的任何动画效果,都可以指定3种速度参数“slow”,“normal”,“fast”时长分别是”0.6秒“0.4秒”“”0.2秒“,当使用速度关 键字时要加引号,例如show("slow"),如果用数字则不需要引号,例如show(1000);即(1000毫秒)1秒钟内显示。
tip3:
callback回调函数适用于jquery所有动画效果方法,例如
$("#element").slideDown("normal",function(){ //在效果完成后做其他事情 })
tip4:
判断是否处于动画状态
if(!$("#element").is(":animated")){
// 如果当前没有进行动画,则添加新动画
}
tip5:
(1)一组元素上的动画效果
当在一个animate()方法中应用多个属性时,动画是同时发生的。
当以链式的写法应用动画方法时,动画是按顺序发生的(除非queue选项值为false)
(2)多组元素上的动画效果
默认情况下,动画都是同时发生的。
当以回调的形式应用动画方式时(包括动画的回调函数和queue()方法的回调函数),动画是按照回调顺序发生的
注意:在动画方法中,其他非动画方法会插队,例如css()方法要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中或者queue()方法中。
这个判断方法在animate()动画中经常用到,需要特别注意。避免动画积累而导致的动画与用户的行为不一致。
1、show()和hide()
①注意hide()方法在将“内容”的display属性值设置为"none"之前,会记住原先的display属性值。当调用show()方法时,就会根据hide()方法记住的display属性值来显示元素。
③同时改变”内容“的高度、宽度和不透明度。
$("#panel h5.head").toggle(function(){ $(this).next().hide(600); },function(){ $(this).next().show(600); })
2、fadeIn()和fadeOut()
只改变元素的不透明度。
3、slideUp()和slideDown()
只改变元素的高度。
4、animate()自定义动画
#panel{ position: relative; width:100px; height: 100px; border: 1px solid #0050d0; background:#96e555; cursor: pointer; }
注意:定义relative
①简单的动画
$("#panel").click(function(){ $(this).animate({left:"500px"},300); })
②累加、累减
$("#panel").click(function(){ $(this).animate({left:"+=500px"},300); })
③多重动画
$("#panel").click(function(){ $(this).animate({left:"500px",height:"200px"},300); })
④按顺序执行(推荐链式写法)
$("#panel").click(function(){ // $(this).animate({left:"500px"},300); // $(this).animate({height:"200px"},3000); $(this).animate({left:"500px"},300) .animate({height:"200px"},3000); })
⑤综合动画
$("#panel").css("opacity","0.5"); //设置不透明度 $("#panel").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) //① .animate({top:"200px",width:"200px"},3000) //② .fadeOut("slow"); //③ // .css("border","5px solid blue"); //④ // ③是在②之后执行(只有是动画才加入到队列),但若改为④,css()方法并不会加入到动画队列中,而是立即执行。 // 想要css()加入队列,只要使用回调函数。 // .animate({top:"200px",width:"200px"},3000,function(){ // $(this).css("border","5px solid blue"); // }) })
5、stop()停止动画
stop([clearQueue],[gotoEnd])
注意:两个参数Boolean值(ture或false)。clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否将正在执行的动画跳转到末状态。
如果是直接使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。
$("#panel").hover(function(){ $(this).stop() .animate({height:"150"},2000) //① 如果在此时触发了光标移除事件。stop()是立即停止①执行②③④;stop(true)是立即停止①清空②执行③④ //stop(false,true)是立即跳到①的结束状态,并执行②③④;stop(true,true)是立即跳到①的结束状态清空②执行③④ .animate({width:"300"},3000); //② },function(){ $(this).stop() .animate({height:"22"},2000) //③ .animate({width:"60"},3000); //④ })
注意:jquery只能设置正在执行的动画的最终状态,而没有提供直接到达未执行动画队列最终状态的方法。
6、delay()延迟动画
$("#panel").css("opacity","0.5"); $("#panel").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)//① .delay(1000) //执行完①后等待1s再执行② .animate({top:"200px",width:"200px"},3000) //② .delay(2000) //执行完②后等待2s再执行③ .fadeOut("slow"); //③ })
7、其它动画方法
toggle(speed,[callback]);
slideToggle(speed,[easing],[callback]); //改变高度
fadeToggle(speed,[easing],[callback]); //改变透明度
fadeTo(speed,opacity,[callback]);
$("#panel h5.head").click(function(){ $(this).next().toggle(); }); // 相当于 // $("#panel h5.head").toggle(function(){ // $(this).next().hide(); // },function(){ // $(this).next().show(); // }); $("#panel h5.head").click(function(){ $(this).next().slideToggle(); }); // 相当于 // $("#panel h5.head").toggle(function(){ // $(this).next().slideUp(); // },function(){ // $(this).next().slideDown(); // }); $("#panel h5.head").click(function(){ $(this).next().fadeToggle(); }); // 相当于 // $("#panel h5.head").toggle(function(){ // $(this).next().fadeOut(); // },function(){ // $(this).next().fadeIn(); // }); $("#panel h5.head").click(function(){ $(this).next().fadeTo(600,0.2); })
图片滚动效果实例:
.v_show { width: 560px; border: 1px solid #dcdcdc; } .v_caption { background-color: #dcdcdc; padding: 0 10px; } .v_caption .highlight_tip { padding: 0 20px; } .v_caption .highlight_tip span { padding: 0 5px; } .v_caption .highlight_tip .current { color: red; } .v_content { position: relative; width: 560px; height: 180px; } .v_content .v_content_list { position: absolute; left: 0; right: 0; } .v_content .v_content_list li { float: left; padding: 10px; }
<div class="fz"> <div class="v_show"> <div class="v_caption fix lh40"> <h2 class="l fz14">卡通动漫</h2> <div class="highlight_tip l"> <span class="current">1</span><span>2</span><span>3</span> </div> <div class="l"> <span class="prev">上一页</span> <span class="next">下一页</span> </div> <em class="r"><a href="#">更多</a> </em> </div> <div class="v_content ovh"> <div class="v_content_list"> <ul class="fix"> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王1</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王2</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王3</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王4</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王5</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王6</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王7</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王8</a></h3> <span>播放:<em>57,865</em></span> </li> <li><a href="#"><img src="images/xxx.jpg" width="120" height="120"> </a> <h3><a href="#">海贼王9</a></h3> <span>播放:<em>57,865</em></span> </li> </ul> </div> </div> </div> </div>
<script> $(function () { var page = 1; var i = 4; var $parent = $("div.v_show"); var $v_show = $parent.find("div.v_content_list"); var $v_content = $parent.find("div.v_content"); var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i); //下一页 $("span.next").click(function () { if (!$v_show.is(":animated")) { if (page == page_count) { $v_show.animate({left: "0px"}, "slow"); page = 1; } else { $v_show.animate({left: '-=' + v_width}, "slow"); page++; } $parent.find("span").eq(page - 1).addClass("current").siblings().removeClass("current"); } }); //上一页 $("span.prev").click(function () { if (!$v_show.is(":animated")) { if (page == 1) { $v_show.animate({left: '-='+v_width*(page_count-1)}, "slow"); page = page_count; } else { $v_show.animate({left: '+=' + v_width}, "slow"); page--; } $parent.find("span").eq(page - 1).addClass("current").siblings().removeClass("current"); } }); }); </script>