点击后弹出,几秒后自动消失

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>提示已点赞 之后消失</title>
   <script type="text/javascript" src="http://ku.suoshipai.cn/static/home/js/jquery-2.0.3.js"></script>
   <style type="text/css">
      #dianji{text-align: center ;font-size: 30px;color:#000;display: block;cursor: pointer}


      #disappare{border:2px solid #ccc;border-radius: 5px;background: #fff;font-size: 20px;text-align: center;
        position: fixed;top:50%;left: 48%;
      }
      #disappare span{
         padding: 10px;
      }
   </style>
</head>
<body>
<div id="content">
   <a id="dianji">点击</a>
   <div id="disappare" style="display:none;">
      <span>已点赞</span>
   </div>
</div>
<script type="text/javascript">
   $(function(){
      $("#dianji").click(function(){
         $("#disappare").show().delay(3000).hide(50);
      });
   })
</script>
</body>
</html>
<!--http://blog.csdn.net/u013630488/article/details/49498311-->

 效果图:

posted @ 2017-06-14 09:51  贺小鸣  阅读(1943)  评论(0编辑  收藏  举报
为尊重他人劳动成果,转载/摘抄请标明来源!