jQuery动画的显示与隐藏效果
jQuery中用于控制元素显示和隐藏效果的方法如表1所示。
表1 控制元素的显示和隐藏
在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow、fast和normal);参数easing表示切换效果,默认效果为swing,还可以使用linear效果;参数fn表示在动画完成时执行的函数。
下面通过代码演示show()、hide()和toggle()的简单使用。
<style>
div { width: 150px; height: 300px; background-color: pink; }
</style>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$("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);
});
</script>
上述代码中,第2行设置div元素的样式宽度150px,高度300px,背景色pink。第4~6行分别定义功能按钮,第7行定义div元素,第9~13行给页面中的第1个按钮绑定单击事件,实现单击“显示”按钮控制div元素的显示,第14~18行给页面中的第2个按钮绑定单击事件,实现单击“隐藏”按钮控制div元素的隐藏,第19~21行给页面中的第3个按钮绑定单击事件,实现单击“切换”按钮控制div元素的显示和隐藏。
在浏览器中运行,效果如图1所示。
jQuery动画的显示与隐藏效果相关推荐
- jQuery动画的显示与隐藏效果!
jQuery中用于控制元素显示和隐藏效果的方法如表1所示. 表1 控制元素的显示和隐藏 在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow.fa ...
- 【jQuery动画】显示与隐藏效果
- JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle
滑动显示和隐藏方式 slideDown([speed], [easing],[fn]) slideup( [ speed, [easing],[fn]]) slideToggle([speed], [ ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- jQuery动画(显示隐藏,淡入淡出,滑动)
目录 分类 基本动画函数 显示元素 交替显示隐藏 滑动效果 向上收缩效果 向下展开效果 交替伸缩样式 淡入淡出效果 淡入效果 淡出效果 自定义不透明度 jQuery的动画函数 分类 基本动画函数:既有 ...
- php下拉列表框 是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
- 【JavaWeb】JQuery实现广告显示和隐藏动画效果
我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能. 代码如下: <!DOCTYPE html> <html> <head& ...
- jQuery 实现显示与隐藏效果
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效. hide()方法 hide() 方法用于隐藏指定的元素,与 CSS 中的 display:none 效果类似. 语法如下所示: ...
- jquery显示与隐藏效果
toggle方法可以动态让隐藏的元素显示,让显示的元素隐藏 加粗样式 从显示的变化来看得出以下结论: show方法和hide方法还有toggle方法,它们能动态地改变当前元素的高度.宽度和不透明度,决 ...
最新文章
- linux中登录类型及配置文件
- ner pytorch project code
- grub error:unknown filesystem的解决方案
- boost::python::dict相关的测试程序
- 【Swift学习笔记-《PRODUCT》读书记录-实现自定义转场动画】
- php重写地址,php url地址重写
- 基于Spring Boot不同的环境使用不同的配置方法
- SyntaxError: Non-UTF-8 code starting with ‘\xe9‘ in file D:/Users/wxk/PycharmProjects/xzykdx/user/12
- 【BZOJ2653】middle,主席树(非权值线段树)维护序列和信息+二分答案
- APP界面设计临摹模板 |教你ui kit套件要怎么使用呢?
- 反射与泛型 java_深入理解Java的反射和泛型
- 台式计算机怎么设置屏幕常亮,怎么设置电脑屏幕一直亮着
- 禁止计算机使用u盘启动,电脑禁用u盘的设置方法
- PC微信逆向-PC微信HOOK-发送Gif表情(版本3.0.0.47)
- 如何截图整个网页 网页截图
- 探索 TDengine在《图码联侦》项目中的应用可行性及实践研究
- WorldEdit 指令大全 开发记录
- 抖音运营技巧都有哪些?如何让爆粉?
- 搜狗搜索正式接入微信公众号
- 百度地图android自定义文字,Android SDK | 百度地图API SDK
热门文章
- P4722 【模板】最大流
- ASP.NET 下载文件方式
- Android开发之SharedPreferences的封装
- 企业为什么要使用基于Docker的PaaS/CaaS平台
- 如何创建.gitignore文件,忽略git不必要提交的文件
- 从iOS证书申请到签名文件生成
- iphone 下拉刷新控件 EGORefreshTableHeaderView 手动显示更新
- Android开发者指南(22) —— Accessing Resources
- 【Elasticsearch 5.6.12 源码】——【3】启动过程分析(下)...
- 软工作业 5:词频统计——增强功能