您的位置：首页 > Web前端 > JQuery

jQuery效果之显示与隐藏

2015-08-09 22:44 701 查看

.hide([duration][,complete])——目标元素的隐藏；

.show([duration][,complete])——目标元素的显示；

.toggle([duration][,complete])——当目标元素隐藏时则显示，否则隐藏；

注：可选参数[duration]为方法执行的时间区间；[,complete]为回调函数。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/my.js"></script>
<style>
div{
background: #005599;
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<img src="images/g.jpg"/>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">隐藏/显示</button>

</body>
</html>

my.js代码部分：

/*显示与隐藏*/
$(document).ready(function(){
//隐藏
$('#btn1').click(function(){
//$('img').hide();
$('img').hide(1000);
});
//显示
$('#btn2').click(function(){
//$('img').show();
$('img').show(1000);
});
//切换显示与隐藏
$('#btn3').click(function(){
//$('img').toggle();
$('img').toggle(1000);
});
//利用hide()制作一个效果
for(var i=0;i<5;i++){
$("<div>").appendTo(document.body);
}
$('div').click(function(){
$(this).hide(2000,function(){
$(this).remove();
})
})
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航