diff --git a/media/css/seahub.css b/media/css/seahub.css
index af97e9df46..151be16e65 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1128,6 +1128,9 @@ textarea:-moz-placeholder {/* for FF */
     -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     z-index:999; /* for repo.html: to show on top of fixed-hd */
+    -webkit-transition: top 0.5s ease;
+    -moz-transition: top 0.5s ease;
+    transition: top 0.5s ease;
 }
 .messages .info {
     padding:5px;
diff --git a/media/js/base.js b/media/js/base.js
index ae4b7fb267..00a71059c0 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -5,12 +5,6 @@ $('#title-panel, #left-panel, #right-panel').each(function() { // for ie 7
 });
 $('#tabs').tabs({cookie:{expires:1}});
 
-// handle messages
-if ($('.messages')[0]) {
-    $('#main').append($('.messages'));
-    $('.messages').css({'left':($(window).width() - $('.messages').width())/2, 'top':10}).removeClass('hide');
-    setTimeout(function() { $('.messages').addClass('hide'); }, 10000);
-}
 
 $(function() {
 
@@ -410,15 +404,43 @@ function apply_form_error(formid, error_msg) {
 // show feedback
 function feedback(con, type, time) {
     var time = time || 5000;
-    if ($('.messages')[0]) {
-        $('.messages').html('<li class="' + type + '">' + con + '</li>');
+    var $el;
+    var hide_pos_top,
+        show_pos_top = '15px';
+    if ($('.messages').length > 0) {
+        $el = $('.messages').html('<li class="' + type + '">' + this.HTMLescape(con) + '</li>');
     } else {
-        var html = '<ul class="messages"><li class="' + type + '">' + con + '</li></ul>';
-        $('#main').append(html);
+        $el = $('<ul class="messages"><li class="' + type + '">' + this.HTMLescape(con) + '</li></ul>');
+        $('#main').append($el);
     }
-    $('.messages').css({'left':($(window).width() - $('.messages').width())/2, 'top':10}).removeClass('hide');
-    setTimeout(function() { $('.messages').addClass('hide'); }, time);
+
+    hide_pos_top = '-' + ($el.outerHeight() + parseInt(show_pos_top)) + 'px';
+
+    // add transition: from 'hide' to 'show'. the transition effect is offered by CSS.
+    $el.css({'left':($(window).width() - $el.width())/2, 'top': hide_pos_top});
+    setTimeout(function() { $el.css({'top': show_pos_top}); }, 10);
+
+    setTimeout(function() { $el.css({'top': hide_pos_top}); }, time);
 }
+
+// handle existing messages (in base.html)
+(function() {
+    var $el;
+    var hide_pos_top,
+        show_pos_top = '15px';
+    if ($('.messages').length > 0) {
+        $el = $('.messages');
+
+        hide_pos_top = '-' + ($el.outerHeight() + parseInt(show_pos_top)) + 'px';
+
+        // add transition: from 'hide' to 'show'. the transition effect is offered by CSS.
+        $el.css({'left':($(window).width() - $el.width())/2, 'top': hide_pos_top});
+        setTimeout(function() { $el.css({'top': show_pos_top}); }, 10);
+
+        setTimeout(function() { $el.css({'top': hide_pos_top}); }, 5000);
+    }
+})();
+
 function disable(btn) {
     btn.attr('disabled', 'disabled').addClass('btn-disabled');
 }
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 35787d1fa9..f657da06a3 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -113,7 +113,7 @@
             {% endblock %}
 
             {% if messages %}
-            <ul class="messages hide">
+            <ul class="messages">
                 {% for message in messages %}
                 <li class="{{ message.tags }}">
                     {% if 'safe' in message.tags %}
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 6a6cb31384..9302227a85 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -375,14 +375,23 @@ define([
 
         feedback: function(con, type, time) {
             var time = time || 5000;
+            var $el;
+            var hide_pos_top,
+                show_pos_top = '15px';
             if ($('.messages').length > 0) {
-                $('.messages').html('<li class="' + type + '">' + this.HTMLescape(con) + '</li>');
+                $el = $('.messages').html('<li class="' + type + '">' + this.HTMLescape(con) + '</li>');
             } else {
-                var html = '<ul class="messages"><li class="' + type + '">' + this.HTMLescape(con) + '</li></ul>';
-                $('#main').append(html);
+                $el = $('<ul class="messages"><li class="' + type + '">' + this.HTMLescape(con) + '</li></ul>');
+                $('#main').append($el);
             }
-            $('.messages').css({'left':($(window).width() - $('.messages').width())/2, 'top':10}).removeClass('hide');
-            setTimeout(function() { $('.messages').addClass('hide'); }, time);
+
+            hide_pos_top = '-' + ($el.outerHeight() + parseInt(show_pos_top)) + 'px';
+
+            // add transition: from 'hide' to 'show'. the transition effect is offered by CSS.
+            $el.css({'left':($(window).width() - $el.width())/2, 'top': hide_pos_top});
+            setTimeout(function() { $el.css({'top': show_pos_top}); }, 10);
+
+            setTimeout(function() { $el.css({'top': hide_pos_top}); }, time);
         },
 
         showFormError: function(formid, error_msg) {