你的位置:首页 > 软件开发 > Java > 第4章 jQuery的事件和动画(二)

第4章 jQuery的事件和动画(二)

发布时间:2016-10-03 02:00:11
二. jQuery中的动画动画在前面几章案例中是回避不了的问题。此处结合一些简便的写法稍作系统的分析。1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法。本质是某个html对象的display从none和 ...

第4章 jQuery的事件和动画(二)

二. jQuery中的动画

动画在前面几章案例中是回避不了的问题。此处结合一些简便的写法稍作系统的分析。

  第4章 jQuery的事件和动画(二)callback:动画完成时执行的函数(可选)速度由慢到快再减为0. 

(3)再复杂一点点

要求:div1向右运动同时,增加宽度。 第4章 jQuery的事件和动画(二)结果真的可以,但是录屏软件诡异地无法记录这一过程。所以只好自己试试了。 两个参数都是布尔值,都是可选的。前者表示是否清空队列,后者则表示是否直接定格到最终画面。什么参数都不写——则中止当前步骤,跳到下一步骤继续执行。场景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 (#换成@)。

可能感兴趣文章

我的浏览记录