jQuery 中控制要显示和隐藏的元素功效的方法如表 1 所示。
表1 控制元素的显示和隐藏
方法说明
显示([速度,[缓动],[fn]])
显示隐藏的匹配元素
隐藏([速度,[缓动],[fn]])
隐藏显示的匹配元素切换([速度],[
缓动],[ fn])
元素显示和隐藏切换
在表1中,参数speed表示动画的速率,可以设置为动画持续时间的微秒值(例如1000),也可以设置为预定的3个速率(慢jquery显示与隐藏,快和正常);参数缓动表示切换疗效,默认疗效为SWING,也可以使用线性疗效;参数fn表示动画完成后执行的功能。
下面显示了通过代码简单使用 show()、hide() 和 toggle()。
div { width: 150px; height: 300px; background-color: pink; } $("button").eq(0).click(function() { $("div").show(1000, function() { alert("已显示"); }); }); $("button").eq(1).click(function() { $("div").hide(1000, function() { alert("已隐藏"); }); }); $("button").eq(2).click(function() { $("div").toggle(1000); });
在上面的代码中,第 2 行将 div 元素的样式长度设置为 150px、高度 300px 和背景颜色粉红色。第4~6行定义功能按钮,第7行定义div元素,第9~13行给出第一个键绑定点击页面上的风波,实现点击“显示”按钮控制div元素的显示jquery显示与隐藏,第14~18行给出页面上第二个键绑定点击风波,实现点击“隐藏”按钮控制div元素的隐藏, 而第19~21行给出页面点击风波的第三个键绑定,实现点击“切换”按钮来控制div元素的显示和隐藏。
在浏览器中运行时,效果如图 1 所示。
图1 案例疗效
脚本屋
您与数百万开发者同在
源码/码农的事
作为最好的 JavaScript 库之一,jQuery 改变了许多人编写 JavaScript 的方式。 它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互,并且有数千个成熟的 jQuery 插件可用。 看看下面这个神奇的功能和疗效,相信你会发现非常有用的。
1.基于jQuery的Ajax异步分页
jPages是一款非常优秀的客户端分页插件,具有很多功能,比如手动播放、关键翻页、延迟加载等。
2、老款响应式jQuery幻灯片效果
SlidesJS是一个老牌的jQuery幻灯片插件,经过多年的发展,它已经成为一个功能齐全、设计精美的幻灯片插件。 它支持循环、自动播放功能和淡入淡出过渡效果jquery效果,还可以手动生成分页符,可以帮助开发者创建甜美的幻灯片效果。
3. 模态窗口、工具提示和消息效果
jBox 是一个强大而灵活的 jQuery 插件,有助于实现模式窗口、工具提示、通知等。 您可以使用 jQuery 选择器轻松向元素添加工具提示效果,就像设置模式窗口一样。
4.世界上最好的jQuery图像轮播效果
Nivo Slider 被誉为世界上最好的图像轮播插件jquery效果,它有两个版本:独立的 jQuery 插件和 WordPress 插件。 目前下载量已突破180万次!
5、视差滚动在图片滑块中的应用
视差滚动(Parallax Scrolling)在网页设计中得到了广泛的应用。 该技术可以使原本平面的网页界面形成动态的三维效果。 美丽很诱人:)
6.制作炫酷的网格动画效果
今天我们想和大家分享一些动漫的概念。 这种奇妙的治疗效果是在 Marcus Eckert 的原型应用程序中发现的。 实现的基本思想是对网格项进行3D旋转,将其展开到全屏,并呈现内容。
7.实现各类动态文字动画
这个插件集成了一些非常好的JavaScript库,并提供了一个方便的文本动画插件,允许您对网页中的文本使用各种动画。
8.动态页面加载动画效果
此效果的核心是使页面窗口中的形状具有动画效果并具有显示活动的指示。 加载新内容时,形状将动画回到显示的页面。 为此,我们将使用 Snap.svg 动画库,因为它允许我们创建复杂的形状和有趣的过渡效果。
写在最后