jQuery中hide()方法用法实例

本文实例讲述了jQuery中hide()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以将匹配元素隐藏。

hide()方法的用法:
此方法如果没有对隐藏效果加以时间限定，那么匹配元素会被瞬间隐藏。例如：

代码如下:

$("div").hide()

以上代码可以将所有div元素瞬间隐藏。
如果方法对隐藏效果加以时间限定，那么匹配元素将会在限定的事件内以比较优雅的形式隐藏。例如：

代码如下:

$("div").hide(2000)

以上代码可以将所有div元素在2000毫秒(2秒)内隐藏。
此方法也可以在隐藏完成后触发一个回调函数。例如:

代码如下:

$("div").hide(2000,function(){alert("我隐藏好了")});

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>hide()函数-我们</title>
<style type="text/css">
div{
  color:blue;
  background-color:green;
  width:100px;
  height:100px;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#first").click(function(){
    $(".first").hide();
  })
  $("#second").click(function(){
    $(".second").hide(2000,function(){alert("我隐藏好了")});
  })
})
</script>
</head>
<body>
  <div class="first"></div>
  <div class="second"></div>
  <button id="first">瞬间隐藏</button>
  <button id="second">优雅的隐藏</button>
</body>
</html>

以上代码能够在隐藏完成以后触发回调函数，于是弹出一个提示框。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery使用hide方法隐藏指定元素class样式用法实例

    本文实例讲述了jQuery使用hide方法隐藏指定元素class样式用法.分享给大家供大家参考.具体如下: 下面的JS代码可以隐藏所有class属性等于test的元素 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button

  • jquery(hide方法)隐藏指定元素实例

    复制代码 代码如下: <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p><script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></sc

  • jQuery版Tab标签切换

    jQuery版Tab标签切换

    鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换 效果图: 源代码: 复制代码 代码如下: <!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

  • 用js模拟JQuery的show与hide动画函数代码

    复制代码 代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getCompute

  • JQuery入门——事件切换之toggle()方法应用介绍

    JQuery入门——事件切换之toggle()方法应用介绍

    1.在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn.fn2.fn3.fn4等函数依次调用. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • jquery使用hide方法隐藏指定id的元素

    本文实例讲述了jquery使用hide方法隐藏指定id的元素.分享给大家供大家参考.具体如下: 下面的代码通过jQuery的hide方法隐藏了id=test的元素 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button&q

  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • 实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

    实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

    本文实例为大家分享了jquery中show().hide()和toggle()用法实例,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识jQuery</title> <script src="http:/www.jb51.net/

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

  • Jquery中使用show()与hide()方法动画显示和隐藏图片

    Jquery中使用show()与hide()方法动画显示和隐藏图片

    (1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

随机推荐