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

最新推荐文章于 2025-06-13 10:25:00 发布

OmelasShell

最新推荐文章于 2025-06-13 10:25:00 发布

阅读量1.7k

点赞数

分类专栏：转载文章标签： jquery div function button 测试 xhtml

转载专栏收录该内容

22 篇文章

订阅专栏

本文介绍使用jQuery实现div元素的各种显示隐藏特效，包括简单的隐藏与显示、窗帘效果展示及切换等。通过不同函数如hide(), show(), toggle(), slideDown(), slideToggle()等的应用，展示了丰富的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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="隐藏" οnclick="hiden()"/>
 <input type="button" value="显示" οnclick="show()"/>
 <input type="button" value="窗帘效果显示2" οnclick="slide()"/>
 <input type="button" value="窗帘效果的切换" οnclick="slideToggle()"/>
  <input type="button" value="隐藏显示效果切换" οnclick="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>

asdf

<!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>jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(  function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(500)以500毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(500);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(500);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" οnclick="hiden()"/>
<input type="button" value="显示" οnclick="show()"/>
<input type="button" value="窗帘效果显示2" οnclick="slide()"/>
<input type="button" value="窗帘效果的切换" οnclick="slideToggle()"/>
<input type="button" value="隐藏显示效果切换" οnclick="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>

    <!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=gbk" />  
            <title>StripingTable</title>  
            <script type="text/javascript" src="http://www.wozaishuo.com.cn/example/jquery/jquery-1.2.1.js"></script>  
            <script type="text/javascript">  
            <!--   
                $(document).ready(function(){ });   
                   
                //隐藏和显示div层   
                function changeDisplay(){   
                    var helloDivObj = $("#helloDiv");   
                    var buttonObj = $("#btnDisplay");   
                    var val = buttonObj.attr("value");   
                    if(val=="隐藏"){   
                        helloDivObj.hide();   
                        buttonObj.attr("value","显示");   
                    }else{   
                        helloDivObj.show();   
                        buttonObj.attr("value","隐藏");   
                    }   
                              // var helloDivObj = $("#helloDiv").toggle(); //甚至只需要这一句搞定切换隐藏与显示               
        }   
            -->  
            </script>  
        </head>  
        <body>  
            <div class="title_a">一、JQuery核心库</div>  
            <div class="title_b">(一)、jQuery(expression,[context])用法!</div>  
            <div class="title_c">3.jQuery(elements)</div>  
            将一个或多个DOM元素转化为jQuery对象。这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。<p></p>  
               
            <input id="btnDisplay" type="button" value="隐藏" οnclick="changeDisplay()"/>  
            <div id="helloDiv">  
            Hello,everyone<p></p>  
            Hello,everytwo<p></p>  
            Hello,everythree<p></p>  
            </div>  
        </bdoy>  
    </html>