0

早晨！

所以我有一个通知 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
在此处输入图像描述

有什么想法吗？这里突出的东西:(

4

2 回答 2

2

使用.slideDown而不是 .show()

jsFiddle Demo

$container.slideDown('slow');
于 2013-09-05T14:43:50.513 回答
2

尝试改变

$container.show('slow');

和

$container.slideDown('slow');

在您的 JS 代码的第 8 行。

于 2013-09-05T14:45:28.300 回答