diff --git a/css/myui.css b/css/myui.css
index 19b1554..b07c634 100644
--- a/css/myui.css
+++ b/css/myui.css
@@ -228,7 +228,7 @@ body {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	min-height: 150px;
+	/* min-height: 150px; */
 	min-width: 250px;
 	max-width: 460px;
 	color: white;
@@ -241,6 +241,7 @@ body {
 	z-index: 999;
 	text-overflow: ellipsis;
 	word-break: break-word;
+	background-color: rgb(50, 50, 50);
 }
 
 .msg-header {
@@ -261,12 +262,16 @@ body {
 	display: block;
 	position: relative;
 	width: 100%;
-	min-height: 70px;
-	background-color: rgb(50, 50, 50);
+	/* min-height: 70px; */
+	max-height:0px;
+	/* background-color: rgb(50, 50, 50); */
 	cursor: default;
 	padding: 10px;
 	text-overflow: ellipsis;
-	word-break: break-word
+	word-break: break-word;
+	animation: msgSlideOut 2s linear forwards,fadeIn .5s linear forwards;
+	opacity: 0;
+	overflow: hidden;
 }
 
 .msg-footer {
@@ -497,6 +502,15 @@ body {
 	}
 }
 
+@keyframes msgSlideOut {
+	from {
+		max-height: 0px;
+	}
+	to {
+		max-height:760px;
+	}
+}
+
 @media screen and (min-width:700px) {
 	input#menu-control:checked+div.menu-container {
 		width: 350px;
diff --git a/js/initialize.js b/js/initialize.js
index a595024..fd2c660 100644
--- a/js/initialize.js
+++ b/js/initialize.js
@@ -53,11 +53,17 @@ $(function () {
 	$(document.body).on('click', '.msg-footer span', function () {
 		var p = $(this).parent().parent();
 		var m = $('.mask');
-		p.css('animation', 'fadeOut .2s forwards');
-		m.css('animation', 'fadeOut .3s forwards');
+		$('.msg-content').animate({
+			height: '0px',
+			padding: '0px 10px'
+		}, 300);
 		setTimeout(function () {
-			p.remove();
-			m.remove();
+			p.css('animation', 'fadeOut .2s forwards');
+			m.css('animation', 'fadeOut .3s forwards');
+			setTimeout(function () {
+				p.remove();
+				m.remove();
+			}, 300);
 		}, 300);
 		message.alertCode = '';
 		if (message.callback)