逐渐消失的消息弹框

可以多次添加逐渐消失

HTML

<div class="toast_box"></div>
<div class="toast"></div>

css

.toast,.toast_box{width:100%;position:absolute;bottom:-.1rem;font-size:0;text-align:center;z-index:10}
.toast_box{bottom:.7rem}
.toast div,.toast_box div{width:100%}
.toast_box div{position:absolute;top:0}
.toast span,.toast_box span{display:inline-block;padding:.05rem .3rem;margin-top:.1rem;border-radius:.3rem;font-size:.18rem;color:#fff;background:rgba(255,255,255,.4)}

js

var anus = 1;
var stnus ='';
// 提示信息
var showToast = function(text) {
	anus++;
	if($(".toast div").length>0){
		var index = $(".toast div").length;
		var toastb = $(".toast div");
		$(".toast_box").append('<div id="a'+anus+'">' + $(toastb).html() + '</div>');
		$(toastb).remove();
		$('#a'+ anus).animate({
            top: '-20px'
        },500,function(){
        	$(this).remove();
        });
	}
	var str = '<div><span>' + text + '</span></div>';
	$(".toast").append(str);
	clearTimeout(stnus);
	stnus = setTimeout(function(){
		$(".toast div").remove();
	},3000);
}