二. jQuery中的动画动画在前面几章案例中是回避不了的问题。此处结合一些简便的写法稍作系统的分析。1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法。本质是某个html对象的display从none和 ...
二. jQuery中的动画
动画在前面几章案例中是回避不了的问题。此处结合一些简便的写法稍作系统的分析。
callback:动画完成时执行的函数(可选)速度由慢到快再减为0.
(3)再复杂一点点
要求:div1向右运动同时,增加宽度。
结果真的可以,但是录屏软件诡异地无法记录这一过程。所以只好自己试试了。 两个参数都是布尔值,都是可选的。前者表示是否清空队列,后者则表示是否直接定格到最终画面。什么参数都不写——则中止当前步骤,跳到下一步骤继续执行。场景1:设想一下,一个鼠标移入动画,还没展示完,用户就移出了。就需要stop()方法。而对于组合动画,需要使用带清除队列参数的stop方法。也就是stop(true)。其它和上面代码基本一致。场景2:动画本是连续的。但是stop()突然把一步停了,接下来的执行其实也失去了意义。(3)延迟动画——delay()方法8.动画方法小结
css
1 *{ 2 margin:0;padding:0; 3 font-family:"微软雅黑",arial; 4 } 5 ul li{ 6 list-style:none; 7 } 8 a{ 9 text-decoration: none;10 }11 #cartoon{12 width:596px;height:186px;13 border:1px solid #ccc;14 border-radius:4px4px00;15 margin:100pxauto;16 position: relative;17 overflow: hidden;18 }19 .header{20 height:30px;21 background: linear-gradient(#f2f2f2,#e3e3e3);22 }23 h4{24 width:70px;float: left;25 height:30px;line-height:30px;26 margin-left:12px;27 }28 .dot{29 padding:10px;width:60px;30 float: left;31 }32 .dot>li{33 width:8px;height:8px;34 border-radius:50%;35 background:#04AEF4;36 float: left;margin-right:4px;37 }38 .btn,.more{39 float: left;40 }41 .btn{42 width:57px;height:20px;43 border-radius:2px;44 box-shadow:1px1px3px#999;45 margin-top:5px;46 cursor: pointer;47 }48 .btn1{49 width:29px;height:20px;float: left;50 background: url(../images/btn_cartoon_01.gif)51 }52 .btn2{53 width:28px;height:20px;float: left;54 background: url(../images/btn_cartoon_02.gif)55 }56 .more{57 line-height:30px;margin-left:320px;58 }59 .more a{60 line-height:30px;61 font-style: italic;62 color:#2B93D2;63 }64 #cartoon>ul{65 height:158px;66 position: absolute;67 }68 #cartoon>ul>li{69 float: left;70 padding:10px;71 }72 ul a{73 font-size:12px;74 color:#2B93D2;75 line-height:24px;76 }77 ul a:hover{78 text-decoration: underline;79 color:#E31E1C;80 }81 ul p{82 font-size:12px;83 color:#666;84 line-height:18px;85 }
来自为知笔记(Wiz)
原标题:第4章 jQuery的事件和动画(二)
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。