本文实例讲述了jQuery动画显示和隐藏效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

点击此处查看在线演示。

完整实例代码点击此处本站下载。

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleJQuery动画显示和隐藏效果/titlescript /* 1 .$('页面元素类型').显示（时间，回调函数);以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数；指定时间后依次执行回调函数，页面上能找到几个，就连着执行几次。时间可以为毫秒数，也可以是慢，正常，快2。$('页面元素').toggle()；切换此元素的显示状态。如果它是显示的，让它隐藏，如果它是隐藏的，让它显示。 3.$('页面元素').向下滑动（时间，回调函数)通过高度变化（向下增大)来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 4.$('页面元素').fadeIn(时间，回调函数)通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数*//脚本脚本语言=' JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本函数test _ show(){/$(' # my image ').show(2000，function(){alert('演示完毕!');});$('img ').show(2000，function(){alert('演示完毕!');});} function test _ hide(){//$(“# my image”).隐藏(2000,函数(){alert('演示完毕!');});$('img ').隐藏(2000,函数(){alert('演示完毕!');});}函数test _ slide down(){ $(' # myImage2 ').向下滑动(500，函数(){alert('滑动向下放大完毕');});}函数test _ slide up(){ $(' # myImage2 ').slideUp(2000，函数(){alert('滑动向上缩小完毕');});}函数test _ slide toggle(){ $(' # myImage2 ').slideToggle(1000，function(){alert('切换滑动效果完毕');});}函数test _ fade in(){ $(' # myImage3 ').fadeIn(2000)，function(){alert('淡入完毕');});}函数test _淡出(){ $(' # myImage3 ').fadeOut(2000)，function(){alert('淡出完毕');});}函数test _ fade to(){ $(' # myImage3 ').fadeTo(2000，0.25，function(){alert('调整到指定透明度完毕');});}/脚本/标题dydiv输入类型='按钮'值='显示onClick='$('p ').' show()；'/input type='button' value='隐藏onClick='$('p ').' hide()；'/|||输入类型='按钮'值='延时显示onClick=' test _ show()'/input type=' button ' value='延时隐藏onClick=' test _ hide()'/input type=' button ' value='切换元素的可见状态onclick='$('#myImage1 ').toggle()'/|||输入类型='按钮'值='滑动向下放大onClick=' test _ slide down()'/input type=' button ' value='滑动向上缩小onClick=' test _ slide up()'/input type=' button ' value='切换滑动效果onClick=' test _ slide toggle()'/| | | input type=' button ' value='淡入onClick=' test _ fadeIn()'/input type=' button ' value='淡出onClick=' test _淡出()'/input type=' button ' value='调整到指定透明度onClick=' test _ fade to()'//div p style=' display : none ' hello World！/p p style=' display : none ' hello World！/p p style=' display : none ' hello World！/p p style=' display : none ' hello World！/p img id=' myImage ' src=' http : images/11。jpg ' style=' display : none '/img id=' myImage 1 ' src=' http : images/1。jpg ' style=' display : none '/img id=' myImage 2 ' src=' http : images/2。jpg ' style=' display : none '/img id=' myImage 3 ' src希望本文所述对大家jQuery程序设计有所帮助。