jquery之超简单的div显示和隐藏特效demo

本篇文章是对jquery中的div显示和隐藏特效demo进行了详细的分析介绍，需要的朋友可以参考下
 
复制代码 代码如下:

<!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.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(  function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()"/>
 <input type="button" value="显示" onclick="show()"/>
 <input type="button" value="窗帘效果显示2" onclick="slide()"/>
 <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
  <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
<div id="divObj" style="display:none">
        1.测试例子<br/>
        2.测试例子<br/>
        3.测试例子<br/>
        4.测试例子<br/>
        5.测试例子<br/>
        6.测试例子<br/>
        7.测试例子<br/>
        8.测试例子<br/>
        9.测试例子<br/>
        0.测试例子<br/>
    </div>
</body>
</html>

时间： 2024-10-24 18:33:34

jquery之超简单的div显示和隐藏特效demo的相关文章

jquery之超简单的div显示和隐藏特效demo(分享)_jquery

复制代码 代码如下: <!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.org/1999/xhtml"><head><meta http-equiv="

jquery简单的div显示和隐藏特效

<!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.org/1999/xhtml"> <head> <meta http-equiv="Content-

超简单CSS+DIV导航菜单代码

提示:您可以先修改部分代码再运行 超简单CSS+DIV导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

基于jquery的超简单上下翻_jquery

复制代码 代码如下: <html> <head> <title>超简单上下翻</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> 简单上下翻,函数 <script type="text/javascript"> function

用jQuery实现鼠标滑入输入框显示出隐藏的div，且可以对显示出的div操作，滑出输入框和显示的div后隐藏

问题描述 如图的效果,注 显示的隐藏div不占用页面布局,可以详细的吗? 解决方案 很简单啊,代码没有,只提供思路监听输入框的鼠标悬浮和离开事件,显示和隐藏div就行了div上也加入相同的鼠标悬浮和离开事件,样式什么的自己处理吧,都是基础

jquery animate方法实现鼠标经过显示离开隐藏效果

animate方法介绍 该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations). 例1.实现鼠标经过显示离开隐藏效果 css代码  代码如下 复制代码

jquery animate实现鼠标放上去显示离开隐藏效果

本文为大家介绍下使用jquery animate实现鼠标放上去显示,离开就隐藏的效果,感兴趣的朋友可以参考下哈,希望对大家有所帮助   1.CSS样式: 复制代码 代码如下: @CHARSET "UTF-8"; * html .showbox,* html .overlay { position: absolute; top: expression(eval(document.documentElement.scrollTop) ); } #AjaxLoading { border:

jquery animate实现鼠标放上去显示离开隐藏效果_jquery

1.CSS样式: 复制代码 代码如下: @CHARSET "UTF-8"; * html .showbox,* html .overlay { position: absolute; top: expression(eval(document.documentElement.scrollTop) ); } #AjaxLoading { border: 1px solid #8CBEDA; color: #37a; font-size: 12px; font-weight: bold;

toggle一个div显示或隐藏且可扩展成自定义下拉框_jquery

复制代码 代码如下: $(function(){ //toggle div $("#gga").click(function(event){ event.stopPropagation(); //阻止冒泡事件 $(".toggleoption").slideToggle("fast"); }); //slideup div $(document).click(function(event) { var eo = $(event.target);