时间:2021-05-26
本文实例讲述了jQuery动画显示和隐藏效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
点击此处查看在线演示。
完整实例代码点击此处本站下载。
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery 动画显示和隐藏效果</title><script> </script><script language="javascript" src="jquery1.3.2.js" ></script><script> function test_show() { //$("#myImage").show(2000,function(){alert("演示完毕!");}); $("img").show(2000,function(){alert("演示完毕!");}); } function test_hide() { //$("#myImage").hide(2000,function(){alert("演示完毕!");}); $("img").hide(2000,function(){alert("演示完毕!");}); } function test_slideDown() { $("#myImage2").slideDown(500,function(){alert("滑动向下放大完毕");}); } function test_slideUp() { $("#myImage2").slideUp(2000,function(){alert("滑动向上缩小完毕");}); } function test_slideToggle() { $("#myImage2").slideToggle(1000,function(){alert("切换滑动效果完毕");}); } function test_fadeIn() { $("#myImage3").fadeIn(2000,function(){alert("淡入完毕");}); } function test_fadeOut() { $("#myImage3").fadeOut(2000,function(){alert("淡出完毕");}); } function test_fadeTo() { $("#myImage3").fadeTo(2000,0.25,function(){alert("调整到指定透明度完毕");}); }</script></head><body><div> <input type="button" value="显示" onClick="$('p').show();" /> <input type="button" value="隐藏" onClick="$('p').hide();" /> ||| <input type="button" value="延时显示" onClick="test_show()" /> <input type="button" value="延时隐藏" onClick="test_hide()" /> <input type="button" value="切换元素的可见状态" onclick="$('#myImage1').toggle()" /> ||| <input type="button" value="滑动向下放大" onClick="test_slideDown()" /> <input type="button" value="滑动向上缩小" onClick="test_slideUp()" /> <input type="button" value="切换滑动效果" onClick="test_slideToggle()" /> ||| <input type="button" value="淡入" onClick="test_fadeIn()" /> <input type="button" value="淡出" onClick="test_fadeOut()" /> <input type="button" value="调整到指定透明度" onClick="test_fadeTo()" /></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="images/11.jpg" style="display:none" /> <img id="myImage1" src="images/1.jpg" style="display:none" /> <img id="myImage2" src="images/2.jpg" style="display:none" /> <img id="myImage3" src="images/3.jpg" style="display:none" /></body></html>希望本文所述对大家jQuery程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1.jQuery动画效果,隐藏和显示。两个方法:hide()"隐藏"show()"显示"JQuery动画效果,隐藏和显示$(document).ready(fu
本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考,具体如下:运行效果截图如下:点击此处查看在线演示。完整实例代码点击此处本站下载。
本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果。分享给大家供大家参考。具体如下:这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌
本文实例为大家分享了基于jQuery实现的手机端图片滑块动画源码,供大家参考,具体内容如下效果图:在线预览下载地址实例代码:适应手机端的jQuery图片滑块动画
本文实例讲述了jQuery自定义动画函数完整实现技巧。分享给大家供大家参考,具体如下:运行效果截图如下:在线演示地址如下:http://demo.jb51.ne