`
hsys
  • 浏览: 286112 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Jquery show hide toggle

jQueryHTML 
阅读更多 

<html>
<head>
<title>show hide toggle</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$("#show").click(function(){
			$("#showDiv").show(1000,alert(100));
		});
		$("#hide").click(function(){
			$("#showDiv").hide(1000,alert(200));
		});
		$("#toggle").click(function(){
			$("#showDiv").toggle(1000,alert(300));
		});
	});
</script>
<style>
	.showDiv
	{
		width:200px;
		height:200px;
		border:1px red solid;
	}
</style>
</head>

<body>

<div class="showDiv" style="display:none;" id="showDiv">show and hide</div>
<p style="display: none">Hello</p>

<input type="button" value="Show" id="show" />
<input type="button" value="Hide" id="hide" />
<input type="button" value="Toggle" id="toggle" />
</body>
</head>


分享到：
| 兼容FireFox和IE8的设为首页和添加收藏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    主要介绍了实例讲解Jquery中隐藏hide、显示show、切换toggle的用法，感兴趣的小伙伴们可以参考一下

    【JavaScript源代码】jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能.docx

    　最近在学习jQuery时接触到了show()、hide()、toggle()函数，于是利用这几个函数练习了一个使元素显示隐藏的案例：　小提示：代码中切换按钮上下的小图标可以在此链接品牌展示功能图片中获取　&lt;!DOCTYPE ...

    jquery中show()、hide()和toggle()用法实例

    主要介绍了jquery中show()、hide()和toggle()用法,以实例形式分析了show()、hide()和toggle()在显示、隐藏及切换等应用技巧,需要的朋友可以参考下

    jquery中toggle函数交替使用问题

    jQuery 的toggle()函数使用show()或hide()函数来切换HTML元素的可见状态。今天我们来探讨下jquery中toggle函数交替使用问题

    jQuery复合事件结合toggle()方法的用法示例

    本文实例讲述了jQuery复合事件结合toggle()方法的用法。分享给大家供大家参考，具体如下： 定义和用法 ...与方法hide()、show()绑定使用，可实现折叠效果； 具体事例： [removed][removed] &lt;scrip

    最全面的jQuery基础知识

    jQuery元素属性、jQuery元素内容、jQuery动态创建内容、jQuery删除节点、jQuery事件处理、jQuery文档就绪的四种写法、jQuery事件绑定和解除绑定、jQuery事件切换、jQuery实现toggle功能、jQuery插件、jQuery插件实用...

    jQuery 1.3 API 参考文档中文版 html

    * show, hide, toggle, slideDown, slideUp, slideToggle 在jQuery 1.3中，padding和margin也会有动画，效果更流畅。 * jQuery(html,[ownerDocument])等效于$(document.createElement("span") * is支持复杂表达式 ...

    jquery-ui-1.10.4.custom.zip

    包括特效（Effect） , 显示（Show） , 隐藏（Hide） , 切换（Toggle） , 添加 Class（Add Class） , 移除 Class（Remove Class） , 切换 Class（Toggle Class） , 转换 Class（Switch Class） , 颜色动画（Color ...

    JQuery权威指南源代码

    动画效果的show()与hide()方法 toggle()方法 slideDown()与slideUp()方法 slideToggle()方法 fadeIn()和fadeOut()方法 fadeTo()方法 简单的动画 移动位置的动画 队列中的动画 动画停止和延时 动画方式浏览...

    jQuery 1.4.1 中文参考

    2.1 jQuery 核心函数 17 2.1.1 jQuery(expression, [context]) 17 2.1.2 jQuery(html, [ownerDocument]) 18 2.1.3 jQuery(html, props) 19 2.1.4 jQuery(elements) 20 2.1.5 jQuery() 20 2.1.6 jQuery(callback) 21 ...

    jQuery权威指南-源代码

    5.1.2　动画效果的show()与hide()方法/126 5.1.3　toggle()方法/128 5.2　滑动/131 5.2.1　slideDown()与slideUp方法/131 5.2.2　slideToggle()方法/134 5.3　淡入淡出/135 5.3.1　fadeIn()与fadeOut()方法/135 ...

    jquery.my.js

    有addClass 添加类，removeClass 删除类，toggleClass 切换类，each 遍历函数，show() 显示， hide() 隐藏，toggle() 切换， html() 获取或设置html内容，text() 获取或设置text内容，parent() 父级关系， // ...

    jQuery详细教程

    通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示： 实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 亲自试一试 ...

    JQuery UI 中文帮助文档

    中文帮助html格式 带示例 Draggable Droppable Resizable Selectable Sortable 部件 Accordion Datepicker Dialog Progressbar Slider Tabs 动画 AddClass ...Hide Show SwitchClass Toggle ToggleClass

    jQuery中的时间与动画

    其中，使用show()方法控制元素的显示，使用hide()方法控制元素的隐藏，使用toggle()方法切换元素的可见状态，使用fadeIn()方法和fadeOut()方法实现元素的淡入和淡出，使用slideUp()方法和slideDown()方法实现元素的...

    jquery animate图片模向滑动示例.rar

    jquery animate图片模向滑动示例，适用于展示图片太多的页面，通过点击左右方向按钮，滑动展示更多的图片。...如果使用的是"hide"、"show"或"toggle"这样的字符串值，则会为该属性调用默认的动画形式。

    jQuery 1.5 API 中文版

    $.show( [ duration [, easing] [, fn] ] ) $.hide( [ duration [, easing] [, fn] ] ) $.toggle( [showOrHide] ) $.toggle( duration [, easing] [, fn] ) Sliding $.slideDown( duration [, easing] [, fn] ) $....

    jQuery中实现动画效果的基本操作介绍

    show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换 都可以传入参数，speed.     fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度   滑动显示 ...

Magicbox
Global site tag (gtag.js) - Google Analytics