jQuery实现的具有淡出效果的元素删除

我心飞翔 分类:实例代码

默认情况下,删除元素一般都是瞬间完成的,这种效果未免不可。

但是感觉有点生硬,下面就分享一段能够实现淡出效果的元素删除功能。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#antzone{
  width:200px;
  height:100px;
  background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  $("#bt").click(function(){
    $("#antzone").fadeTo("slow", 0.01,function(){
      $(this).slideUp("slow", function(){
        $(this).remove();
      })
    })
  })
});
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了此功能,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当元素结构完全加载完毕再去执行函数中的代码。(2).$("#bt").click(function(){}),为按钮注册click事件处理函数。

(3).$("#antzone").fadeTo("slow", 0.01,function(){

  $(this).slideUp("slow", function(){

    $(this).remove();

  })

}),实现此效果其实就是利用了方法的回调函数,先设置透明度,然后在上拉,最后删除。

二.相关阅读:

(1).fadeTo()方法可以参阅jQuery fadeTo()一章节。

(2).slideUp()方法可以参阅jQuery slideUp()一章节。

(3).remove()方法可以参阅jQuery slideUp()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容