jQuery的動畫高度，爲什麼我的div動畫從左邊開始？

所以我有一個通知div，當它被激活時將添加一個成功或錯誤類，只是添加不同的背景顏色。

由於某些原因，當通知div動畫消失時，來自添加的成功或錯誤類的顏色將從左上角進行動畫，而不是直接向下。

enter image description here

我的jsfiddle http://jsfiddle.net/leongaban/DPUVg/

HTML

<div class="notification-container"></div>

CSS：

.notification-container { 
    position: relative; 
    opacity: 0; 
    width: 100%; 
    height: 56px; 
    background: #ccc; 
} 

.alert-success, .alert-error { 
    width: 100%; 
    height: 56px; 
    text-align: center; 
    line-height: 56px; 
    color: white; 
    cursor: pointer; 
} 
.alert-success { width: 100%; background: blue; } 
.alert-error { width: 100%; background: red; }

jQuery的

var jsonFakeBoolean = true; 

if (jsonFakeBoolean) { 
    $container = $('<div id="notification-div">'); 
    $container.html($('<h4>').html('This is an Alert MSG!')); 
    $container.addClass('alert-success'); 
    $container.hide(); 
    $container.appendTo('.notification-container'); 
    $container.show('slow'); 

    $('.notification-container').fadeIn('slow'); 
    $('.notification-container').animate({ 
    opacity: 1, 
    height:'+=56px' }, 
    500, function() { 
    /* stuff to do after fading in is done */ 
     setTimeout(function() { 
      $('.notification-container').fadeOut('slow', function() { 
       $('.notification-container').empty(); 
       alert('done'); 
      }); 
     }, 15000); 
    }); 

    return $container; 
}

從Chrome的控制檯生成的HTML
enter image description here