jQuery动画高度，为什么我的div从左边动画？

Question

早！

所以我有一个通知div，当激活它时会添加一个成功或错误类，只添加不同的背景颜色。

由于某种原因，当通知div动画淡出它时，添加的成功或错误类的颜色从左上角开始动画，而不是直接向下。

我的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

有什么想法？在这里突出的事情:(

Answer 1

使用.slideDown代替.show（）

jsFiddle Demo

$container.slideDown('slow');

Answer 2

尝试更改

$container.show('slow');

与

$container.slideDown('slow');

在JS代码的第8行。