冰剑博客

蛋疼，我也不知道给这效果起名字，就这样吧，这样大家更加容易理解。

话说YD的 @MOPVHS 写了一篇WordPress)借jQuery之力找出坐沙发的是谁，进去看后发现这个功能没撒好玩的，于是就继续做我喜欢的事---看评论。往下一拖动，就发现了一个红色字体的 +1 渐渐的上升（开始我以为是JQ实现的，后来发现是张图片，日）。

效果就是图中这样，，评论提交成功后就会如下图所示的一样，你30天内的评论数 +1 ，真是效果大家评论后就可以看到的。

实现这个效果不难，仅仅只是用到了jQuery的 animate 函数。首先说说我博客的评论环境，我博客使用的是非嵌套的Ajax提交方法，修改方法来至于 @Xiaorsz ，其实这些影响都不大，直接给出代码吧，修改的文件就看你自己的博客是怎么折腾的了。

//.......省略Ajax提交的一部分，从提交成功后开始
setTimeout(function() {//延迟执行，为的是让新提交的评论显示完以后再执行
    $('.comment-num').after('<span class="comment-add">+1</span>');//添加一个span标签在访客30天内评论次数的后面
    $('.comment-add').animate({//让这个标签执行动画效果
        fontSize: '76px',//当前默认的字体大小变大到72px
        opacity: 'hide'//渐渐的隐藏起来
    },
    3600);//动画效果持续3600毫秒
    $('.comment-num').text(parseInt($('.comment-num').text()) + 1)//最后再让访客评论次数+1
},
1200);
setTimeout(function() {//动画执行完以后的操作
    $('.comment-add').remove()//将渐隐后的span标签移除
},
5000)
}
});

.comment-add {
	color:red;
	display:none;
	font-weight:bold;
	z-index:16;
	margin-left:-18px;//为了让他显示在评论数量的上面；
	position:absolute;
}

实现代码就这么一点，其他的美化大家自己再去试吧。

1. 从来没有在本博客评论过；
2. 当前浏览器中没有本博的Cookie记录；
3. 浏览器中有Cookie记录，但是30天之内没有任何评论的；

PS.以上三种情况是不会显示这种效果的，解决办法就是添加一条评论后刷新页面再评论就可以看到效果了。