`

隐藏和显示

 
阅读更多

通过jquery的css方法,设置div隐藏

代码如下:

$("#sendPhoneNum").css("display", "none");  

hide()函数,如果被选的元素已被显示,则隐藏该元素。

语法:

$(selector).hide(speed,callback)

实现隐藏,括号里可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带带slow,fast

show()函数

语法:

*.show(speed, [callback])

显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。有speed参数和可选callback参数,speed表示显示的时间毫秒,后面的是可选函数

toggle() 方法切换元素的可见状态。

语法:

$(selector).toggle(speed,callback)

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

.slideUp()通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。

语法:

$(selector).slideUp(speed,callback)

 .slideDown()窗帘效果展开;通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。回调函数是可选的,speed也有上面的三种预定速度,也可以是数值

 

*.slideDown(speed, [callback])

 举一个小例子:

鼠标放到“隐藏”上隐藏p标签,放到”显示“上将以隐藏的内容显示出来

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").mouseenter(function(){
  $("p").hide();
  });
  $("#show").mouseleave(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果鼠标放到“隐藏”按钮上,我就会消失。</p>
<a id="hide" type="button">隐藏</a>
<a id="show" type="button">显示</a>
</body>
</html>

 

 

分享到:
评论

相关推荐

    动态隐藏和显示工具栏

    在软件开发过程中,用户界面(UI)的设计至关重要,其中一种常见的设计手法是动态隐藏和显示工具栏。这种技术可以优化用户界面,提高空间利用效率,同时保持功能的易用性。本文将深入探讨动态隐藏和显示工具栏的概念...

    微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    总结来说,微信小程序中实现滑动页面隐藏和显示组件功能的关键在于,准确地监听页面滚动事件,根据滚动距离控制组件的显示状态,并通过CSS过渡动画使显示和隐藏过程更为平滑自然。这种交互方式对于改善用户体验,...

    onclick事件实现div的隐藏和显示

    打开这个文件,你可以看到一个实际运行的示例,并可以通过修改代码来进一步理解 `onclick` 事件和 `div` 隐藏显示的机制。此外,也可以学习如何利用浏览器的开发者工具进行实时查看和调试,这对于提升网页开发技能...

    css3 transform 14种侧边栏导航的隐藏和显示动画效果

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现14种不同的侧边栏导航隐藏和显示的动画效果。这些效果对于优化移动设备和其他小屏幕设备的用户体验至关重要,因为它们允许用户轻松地访问和隐藏导航...

    C#实现程序最小化到托盘,关闭后到托盘,热键实现隐藏和显示间切换

    同时,通过设置热键(快捷键)来实现在隐藏和显示之间快速切换,可以方便用户随时调用或隐藏程序窗口。 首先,我们需要了解Windows Forms中的几个关键组件和方法: 1. **NotifyIcon组件**:这是用来在系统托盘区域...

    PB 动态设置数据窗口列隐藏和显示的例子

    PB 动态设置数据窗口列隐藏和显示的例子,用PB8写的,因用户要求在网上没有找到,自己写了一个。 写得比较粗糙,但能看得懂。

    osg节点轮流显示,隐藏和显示

    在OpenSceneGraph (OSG) ...总的来说,OSG提供了丰富的功能来管理3D场景中的节点,无论是简单的显示和隐藏,还是复杂的动画序列,都可以通过灵活地组合这些功能来实现。在实际项目中,应根据具体需求选择最适合的方法。

    隐藏和显示控件的源代码资源

    在编程领域,尤其是在开发用户界面(UI)时,隐藏和显示控件是常见的操作,用于根据用户需求或程序逻辑来动态地改变用户界面的可见性。控件是UI中的基本元素,如按钮、文本框、复选框等,它们允许用户与应用程序进行...

    滑动隐藏和显示头部

    - 修改头部组件的显示和隐藏阈值,比如滑动距离多远才开始隐藏或显示。 - 调整动画速度,使得滑动效果更符合产品风格。 - 添加自定义交互,如手势识别或过渡动画。 - 如果需要,可以修改布局文件,调整头部组件的...

    VB隐藏和显示桌面源代码

    标题中的“VB隐藏和显示桌面源代码”指的是使用Visual Basic(VB)编程语言编写的一段程序,该程序能够实现对Windows操作系统桌面的隐藏和显示功能。Visual Basic是Microsoft开发的一种面向对象的编程环境,常用于...

    自动隐藏和显示标题栏ListView

    综上所述,"自动隐藏和显示标题栏ListView"技术涉及到了手势识别、动画设计、布局管理和组件封装等多个方面,通过巧妙地结合这些技术,我们可以为用户提供更加沉浸式和流畅的交互体验。在实际开发中,需要根据项目的...

    QT-侧靠动画窗口-隐藏和显示窗体

    在QT中,我们可以通过使用QGraphicsView和QGraphicsScene来实现复杂的动画效果,包括侧靠动画窗口的隐藏和显示。 在"QT-侧靠动画窗口-隐藏和显示窗体"这个主题中,我们主要关注的是如何在QT应用中实现一种类似手机...

    易语言任务栏程序图标的简单隐藏和显示

    本篇文章将详细讲解如何使用易语言来实现任务栏程序图标的简单隐藏和显示。 易语言是一款面向中文用户的编程语言,它的语法简洁明了,适合初学者学习。在易语言中,我们可以利用系统提供的API函数来操作任务栏图标...

    hidden.html button隐藏和显示内容

    button隐藏和显示内容,刚开始学,只是想知道这个博客是怎么玩的,就上传了

    隐藏和显示菜单栏的资源

    总的来说,隐藏和显示菜单栏是一个基本但实用的功能,适用于各种操作系统和应用程序。理解如何操作不仅有助于提升工作效率,还能帮助我们更好地定制工作环境,满足个人喜好。在日常使用中,熟练掌握这一技巧能够使...

    js控制层隐藏和显示

    在JavaScript中,控制层的隐藏和显示是网页交互性中的基本操作,广泛应用于各种功能,如弹出框、菜单、提示信息等。本主题主要涉及两种实现方式:点击事件触发和鼠标移动事件触发。 首先,我们来探讨点击事件触发的...

    JQ 隐藏和显示

    // 元素以滑动方式切换显示和隐藏,持续700毫秒 ``` 在实际项目中,可能会遇到多个元素需要同时进行隐藏和显示的操作。此时,我们可以利用类选择器或者数据属性来批量操作这些元素。例如: ```javascript $("....

    js和css3智能隐藏和显示的顶部导航菜单

    本文将深入探讨如何使用JavaScript(简称js)和CSS3来创建一款智能隐藏和显示的顶部导航菜单。这种菜单在用户滚动页面时能根据滚动方向和距离自动调整其可见性,提供更流畅的浏览体验。 首先,我们来了解CSS3。CSS3...

    Qt实现窗体在显示屏旁边自动隐藏/显示

    首先,我们需要在窗体类中添加必要的信号和槽,例如`showEvent()`和`hideEvent()`,这两个事件会在窗体显示和隐藏时触发。然后,我们可以利用`QApplication::desktop()`获取当前的工作区信息,通过`QRect`对象来表示...

    输入框的隐藏和显示

    例如,可以使用CSS的`transition`属性为输入框的显示和隐藏添加平滑的动画效果。此外,对于更复杂的场景,可能需要使用框架如React或Vue.js,它们提供了更为方便和高效的方式来管理组件状态和DOM更新。 标签...

Global site tag (gtag.js) - Google Analytics