元素消失其实就是我点击之后就自动隐藏了，下面我来给大家介绍利用jquery的来实现html元素的隐藏与显示了，有需要的可参考。
这个例子向你演示当用户点击图片按钮时，如何让某些元素消失。具体效果如下图所示：
下面是核心jQuery代码：
| 代码如下 | 复制代码 |
$(document).ready(function () {
$(".pane .delete").click(function () {
$(this).parents(".pane").animate({
opacity: "hide"
}, "slow");
}); }); |
当点击<img>时，jQuery会首先寻找 <div>的父元素，然后用缓慢的速度将父元素opacity设置为透明效果，达到隐藏效果。
实例(jquery文件这里不提供，大家可到官网下载最新的jquery文件即可）
| 代码如下 | 复制代码 |
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>简单的消失效果</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});
});
</script>
<style type="text/css">
body { margin: 10px auto; width: 470px; }
h3 { margin: 0; padding: 0 0 .3em; }
p { margin: 0; padding: 0 0 .5em; }
.pane { background: #edf5e1; padding: 10px 20px 10px; position: relative; border-top: solid 2px #c4df9b; }
.pane .delete { position: absolute; top: 10px; right: 10px; cursor: pointer; }
</style>
</head>
<body>
<div class="pane">
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo
lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae
odio. Vivamus vitae ligula.</p>
<img src="images/btn-delete.gif" alt="delete" class="delete"> </div>
<div class="pane">
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo
lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae
odio. Vivamus vitae ligula.</p>
<img src="images/btn-delete.gif" alt="delete" class="delete"> </div>
<div class="pane">
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo
lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae
odio. Vivamus vitae ligula.</p>
<img src="images/btn-delete.gif" alt="delete" class="delete"> </div>
</body>
</html> |
