JavaScript程序的设计（第2版）07.JQuery的动画效果.pptVIP

JQuery的动画效果;基本的动画效果指的就是元素的隐藏和显示。在JQuery中提供了两种控制元素隐藏和显示的方法，一种是分别隐藏和显示匹配元素，另一种是切换元素的可见状态，也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见的。 1．隐藏匹配元素 使用hide()方法可以隐藏匹配的元素。hide()方法相当于将元素CSS样式属性display的值设置为none，它会记住原来的display的值。hide()方法有两种语法格式，一种是不带参数的形式，用于实现不带任何效果的隐藏匹配元素，其语法格式如下： hide() 例如，要隐藏页面中的全部图片，可以使用下面的代码： $(img).hide(); 另一种是带参数的形式，用于以优雅的动画隐藏所有匹配的元素，并在隐藏完成后可选地触发一个回调函数，其语法格式如下： hide(speed,[callback]) qspeed：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（1000毫秒=1秒）后完全隐藏。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）。 qcallback：可选参数，用于指定隐藏完成后要触发的回调函数。 例如，要在300毫秒内隐藏页面中的id为ad的元素，可以使用下面的代码： $(#ad).hide(300);;使用show()方法可以显示匹配的元素。hide()方法相当于将元素CSS样式属性display的值设置为block或inline或除了none以外的值，它会恢复为应用display：none之前的可见属性。show()方法有两种语法格式，一种是不带参数的形式，用于实现不带任何效果的显示匹配元素，其语法格式如下： show() 例如，要隐藏页面中的全部图片，可以使用下面的代码： $(img).show(); 另一种是带参数的形式，用于以优雅的动画隐藏所有匹配的元素，并在隐藏完成后可选择地触发一个回调函数，其语法格式如下： show(speed,[callback]) speed：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（1000毫秒=1秒）后完全显示。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）。 callback：可选参数，用于指定隐藏完成后要触发的回调函数。 例如，要在300毫秒内显示页面中的id为ad的元素，可以使用下面的代码： $(#ad).show(300); 3．切换元素??可见状态 使用toggle()方法可以实现切换元素的可见状态。也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见的。toggle()方法的语法格式如下： toggle() 例如，要实现通过单击普通按钮隐藏和显示全部div元素可以使用下面的代码。 $(document).ready(function(){ $(input[type=button]).click(function(){ $(div).toggle(); //切换有所有div元素的显示状态 }); }); 　　等效于： $(document).ready(function(){ $(input[type=button]).toggle(function(){ $(div).hide(); //显示div元素 },function(){ $(div).show(); //隐藏div元素 }); }); 　　　4．实战模拟：自动隐藏式菜单 　　在设计网页时，可以在页面中添加自动隐藏式菜单，这种菜单简洁易用，在不使用时能自动隐藏，保持页面的清洁。下面将通过一个具体的例子来说明如何通过JQuery实现自动隐藏式菜单。;例12-18 自动隐藏式菜单。 （1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入JQuery库。; 在上面的代码，绑定鼠标的移出事件时，使用了hover()方法，而没有使用mouseout()方法，这是因为使用mouseout()方法时，当鼠标在菜单上移动时，菜单将在显示与隐藏状态下反复切换，这是由于JQuery的事件捕获与事件冒泡造成的，但是hover()方法有效的解决了这一问题。 运行本实例，将显示如图12-41所示的效果，将鼠标移到“隐藏菜单”图片上时，将显示如图12-42所示的菜单，将鼠标从该菜单上移出后，又将显示为图12-41所示的效果。;在JQuery中，提供了slideDown()方法（用于滑动显示匹配的元素）、slideUp()方法（用于滑动隐藏匹配的元素）和slideToggl