<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>点击事件后动画提示</title>
<style>
.addhot{ display:none; width:100px; height:30px; line-height:30px;position:absolute; top:-80px; left:30px; padding-top:50px; text-align:center; font-size:20px; font-weight:600; color:#ff0454;}
a.btn_like{background-position:-2px -5px;color:#ffffff;text-shadow:0 -1px 0 rgba(51,51,51,0.35);}
a.btn_like:hover{ background-position:-2px -55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<head>
<body>
<div style="display:block; width:180px; height:200px; position:absolute; top:200px; right:180px;">
<div class="addhot"></div>
<a href="javascript:void(0)" class="btn_like">还不错</a>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$(".btn_like").click(function(){
$(".addhot").slideDown(500).text("积分+10").hide(500);
});
});
</script>
</body>
</html>