使用jQuery的函数能轻松的让页面实现动态的效果。比如说显示和隐藏、淡入和淡出、滑上和滑下。jQuery为我们提供了接口,我们可以实现很炫的功能。当我们为页面添加这些动态效果时,应该考虑一下这个效果是否能更好的展示页面内容,而不应该随意乱用,那样会起到反作用。
这里只详细介绍一个方法,其他的方法类似。
show(speed,callback) |
|
使包装集里的元素显示。当元素使用jQuery效果处于隐藏状态时,如果不带参数调用show,就通过把元素的display样式属性的值还原为之前的设置(如block或inline)使操作突然发生;如果元素没有通过jQuery效果隐藏,display样式属性的值就默认为block。如果提供speed参数,就通过调整元素的大小和提高不透明度,使元素显示。可以指定在动画结束时调用的回调函数(可选) |
|
参数 |
|
Speed |
(数字|字符串)把效果的持续时间(可选地)指定为毫秒数或预定义的字符串之一:slow、normal或fast。如果省略,就不产生动画并立即在显示屏上显示元素。 |
Callback |
(函数)回调函数(可选),在动画完成时调用。没有参数传递给这个函数,但函数上下文(this)被设置为以动画方式隐藏的元素。 |
返回 |
包装集 |
这里还要说明一点,凡是被这些函数隐藏的元素实质上就是display属性被设置为了none。
下面看一个综合了很多方法的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | < html xmlns="http://www.w3.org/1999/xhtml"> < head > < title ></ title > < script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></ script > < script type="text/javascript"> $(function () { var content = $('#content'); var div = $('#show'); $('#fadeOut').click(function () { div.fadeOut("slow", function () { content.append("淡出效果完成< br />"); }) }); $('#fadeIn').click(function () { div.fadeIn("slow", function () { content.append("淡入效果完成< br />"); }) }); $('#showDiv').click(function () { div.show("slow", function () { content.append("显示效果完成< br />"); }) }); $('#hideDiv').click(function () { div.hide("slow", function () { content.append("隐藏效果完成¦< br />"); }) }); $('#toggle').click(function () { div.toggle("slow", function () { content.append("自动切换完成< br />"); }) }); $('#slideUp').click(function () { div.slideUp("slow", function () { content.append("滑上效果完成< br />"); }) }); $('#slideDown').click(function () { div.slideDown("slow", function () { content.append("滑下效果完成< br />"); }) }); $('#slideToggle').click(function () { div.slideToggle("slow", function () { content.append("自动切换滑上滑下完成< br />"); }) }); }) </ script > </ head > < body > < div id="show" style="border: 1px solid black; background-color: Aqua; width: 200px; height:200px;"> </ div > < input id="fadeOut" type="button" value="淡出" /> < input id="fadeIn" type="button" value="淡入" /> < br /> < input id="showDiv" type="button" value="显示" /> < input id="hideDiv" type="button" value="隐藏" /> < input id="toggle" type="button" value="自动切换" /> < br /> < input id="slideUp" type="button" value="滑上" /> < input id="slideDown" type="button" value="滑下" /> < input id="slideToggle" type="button" value="自动切换" /> < div id='content'> </ div > </ body > </ html > |
运行效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步