您的位置：首页 > 其它

juqery 点击显示点击隐藏，slideDown slideUp slideToggle

2015-06-20 22:43 274 查看 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>webrx-title</title>


<script src="js/jquery-1.11.2.min.js"></script>

<style>

#ad{

width:200px;

height:300px;

background-color:green;

}


</style>


</head>


<body>

<input type="button" value="slideDown" onClick="$('#ad').slideDown('fast')" >

<input type="button" value="slideUp" onClick="$('#ad').slideUp('fast')">

<input type="button" value="slideToggle" onClick="$('#ad').slideToggle('fast')">


<div id="ad"></div>

</body>

</html>

[/code]注意引入的jquery一定要正确slideToggle   点击关闭再点展开slideUp        点击合上slideDown      点击展开


mybtn 的控制点击显示点击隐藏
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>webrx-title</title>

<script src="js/jquery-1.11.2.min.js"></script>

<style>

#ad{

width:200px;

height:300px;

background-color:green;

}

</style>

<script>

$(document).ready(function(e) {

$('input[value=mybtn]').click(function(){

var o=$('#ad');

o.is(':hidden') ? o.slideDown('fast') : o.slideUp('slow');

});

});


</script>

</head>

<body>

<input type="button" value="mybtn">

<div id="ad"></div>

</body>

</html>

[/code]fadein fadeout 控制显示隐藏
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>webrx-title</title>

<script src="js/jquery-1.11.2.min.js"></script>

<style>

#ad{

width:200px;

height:300px;

background-color:green;

}


</style>

<script>

$(document).ready(function(e) {

$('input[value=mybtn]').click(function(){

var o=$('#ad');

//(o.is(':hidden') ? o.slideDown('slow') : o.slideUp('slow') )

(o.is(':hidden') ? o.fadeIn('slow') : o.fadeOut('slow') )

});

});


</script>

</head>

<body>

<input type="button" value="fadeIn" onClick="$('#ad').fadeIn('fast')" >

<input type="button" value="fadeOut" onClick="$('#ad').fadeOut('fast')">

<input type="button" value="fadeTo" onClick="$('#ad').fadeToggle('fast')">

<input type="button" value="mybtn">

<div id="ad"></div>

</body>

</html>

[/code]注意slideUp和fadeIn显示和隐藏的效果不同

来自为知笔记(Wiz)
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航