jquery-delay(),queue()

 1 ????<style> 2 ????????div{ 3 ????????????width: 100px; 4 ????????????height: 100px; 5 ????????} 6 ????????.div1{background: red;display: none;} 7 ????????.div2{background: yellow} 8 ????????.div3{background: blue} 9 ????????.div4{background: purple}10 ????????.div5{background: pink}11 ????</style>12 ????<p></p>13 ????<div class="div1"></div>14 ????<div class="div2"></div>15 ????<div class="div3"></div>16 ????<div class="div4"></div>17 ????<div class="div5"></div>18 ????<script>19 ????????$(".div1").hover();20 ????????$(".div2").slideDown();21 ????????$(".div3").fadeIn();22 ????????$(".div4").fadeOut().delay(1000).fadeIn(1000);23 ????????$(".div5").fadeOut().delay(1200).fadeIn(1000);24 ????????// delay()方法可以延迟队列，先执行完fadeOut之后，等待1200ms之后才可以执行下一个动画,只能用在动画中25 26 ????????$(".div2").click(function(){27 ????????????function showIt(){28 ????????????????$(".div1").fadeIn(2000);29 ????????????????$(".div1").slideDown(2000);30 ????????????????$(".div1").slideUp(2000);31 ????????????????$(".div1").fadeOut(2000,showIt);32 ????????????}33 ????????????????function showab(){34 ????????????????????// var n =$(".div1").queue("fx");35 ????????????????????// 也可以传递一个匿名函数,或则可以在匿名函数中传入一个函数名36 ????????????????????// 注意使用.queue()添加一个函数，应保证最后的时候$(this).dequeue(),这样能让队列中的其他函数按顺序执行37 ????????????????????$(".div1").queue("fx",function(nextFun){38 ????????????????????????alert("ok ,that is all!");39 ????????????????????????$(".div1").dequeue();40 ????????????????????????// nextFun();41 ????????????????????})42 ????????????$("p").text(n.length)43 ????????????setTimeout(showIt,1000)44 ????????????????}45 ????????????showIt();46 ????????????showab();47 ????????});48 ????????$(".div3").click(function(){49 ????????????$(".div2").slideDown(1000).fadeIn(1000).fadeOut(1000).slideUp(1000);50 ????????????$(".div2").queue(function(){51 ????????????????alert("div2 is over!");52 ????????????})53 ????????})54 55 ????</script>