网页设计与开发第19章jQuery技术.ppt

（3）编写CSS样式，用于控制导航菜单的显示样式，具体代码请参见光盘。 （4）在引入jQuery库的代码下方编写jQuery代码，首先隐藏全部子菜单，然后再为每个包含子菜单的主菜单项添加模拟鼠标连续单击的事件toggle()，具体代码如下： script type=text/javascript $(document).ready(function(){ $(dd).hide(); //隐藏全部子菜单 $(dt[class!=title]).toggle( function(){ // slideDown:通过高度变化（向下增长）来动态地显示所有匹配的元素 $(this).css(backgroundImage,url(images/title_hide.gif)); $(this).next().slideDown(slow); }, function(){ // slideUp:通过高度变化（向上缩小）来动态地隐藏所有匹配的元素 $(this).css(backgroundImage,url(images/title_show.gif)); $(this).next().slideUp(slow); } ); }); /script 运行本实例，将显示如图19-36所示的效果，单击某个主菜单时，将展开该主菜单下的子菜单，例如，单击“薪酬管理”主菜单，将显示如图19-37所示的子菜单。通常情况下，“退出系统”主菜单没有子菜单，所以单击“退出系统”主菜单将不展开对应的子菜单，而是激活一个超级链接。 图19-36 未展开任何菜单的效果 图19-37 展开“薪酬管理”主菜单的效果 19.7.4 自定义的动画效果 在前面的3节中我们已经介绍了3种类型的动画效果，但是有些时候，开发人员会需要一些更加高级的动画效果，这时候就需要采取高级的自定义动画来解决这个问题。在jQuery中，要实现自定义动画效果，主要应用animate()方法创建自定义动画，应用stop()方法停止动画。下面分别进行介绍。 1．使用animate()方法创建自定义动画 animate()方法的操作更加自由，可以随意控制元素的属性，实现更加绚丽的动画效果。animate()方法的基本语法格式如下： animate(params,speed,callback) params：表示一个包含属性和值的映射，可以同时包含多个属性，例如{left:200px,top:100px}。 speed：表示动画运行的速度，参数规则同其他动画效果的speed一致，它是一个可选参数。 callback：表示一个回调函数，当动画效果运行完毕后执行该回调函数，它也是一个可选参数。 注意： 在使用animate()方法时，必须设置元素的定位属性position为relative或absolute，元素才能动起来。如果没有明确定义元素的定位属性，并试图使用animate()方法移动元素时，它们只会静止不动。 例如，要实现将id为fish的元素在页面移动一圈并回到原点，可以使用下面的代码： script type=text/javascript $(document).ready(function(){ $(#fish).animate({left:300},1000) .animate({top:200},1000) .animate({left:0},200) .animate({top:0},200); }); /script 在上面的代码中，使用了连缀方式的排队效果，这种排队效果，只对jQuery的动画效果函数有效，对于jQuery其他的功能函数无效。 技巧： 在animte()方法中可以使用属性opacity来设置元素的透明度。如果在{left:400px}中的400px之前加上“+=”就表示在当前位置累加，“-=”就表示在当前位置累减。 2．使用stop()方法停止动画 stop()方法也属于自定义动画函数，它会停止匹配元素正在运行的动画，并立即执行动画队列中的下一个动画。stop()方法的语法格式如下： stop(clearQueue,gotoEnd) clearQueue：表示是否清空尚未执行完的动画队列（值为true时表示清空动画队列）。 gotoEnd：表示是否让正在执行的动画直接到达动画结束时的状态（值为true时表示直接到达动画结束时状态）。 例如，需要停止某个正在执行的动画效果，清空动画序列并直接到达动画结束时的状态，只需在$(document).ready()方法