.slideDown()不工作

Question

这应该很容易，但我在谷歌上，没有找到任何信息。

我正在做：

        $notification.slideDown(1000, function(){
            $('#notifications').append($notification);
        });

然而，它并没有下滑。它是显示没有任何动画。也没有错误。

.slideUp()正在正常工作。我在这里做错什么了？

jsFiddle

Answer 1

变化

  $notification.slideDown(1000, function () {
     $('#notifications').append($notification);
 });

至

  $('#notifications').append($notification.hide());
        $notification.slideDown(1000);

slideDown不能工作的原因是元素在追加时是可见的

演示

还请注意，当您slideUp通知，您应该删除它，因为否则，您将有多个通知只是占据位置

$closeButton.click(function () {
    $(this).parent().slideUp(function () {
        $(this).remove();
    });
});

Answer 2

slideDown文档说：

$notification.slideDown(1000, function(){});

这里的函数在滑动完成时执行。因此，您需要追加隐藏元素，然后添加slidDown来显示。

$('#notifications').append($notification.hide());
$notification.slideDown(1000);      

这是演示

Answer 3

您有两个小问题，第一，需要隐藏.notification元素才能实现slideDown()。

.notification{
    display: none;
}

其次，您试图在动画完成之前不存在的元素中动画:)

    $notification.slideDown(1000, function(){
        $('#notifications').append($notification);
    });

下面是更新的脚本。PS:不要忘记添加CSS代码片段.

$(document).ready(function(){
    CKEDITOR.replace( 'description' );

    $('#title').focus();

    $('form').submit(function(event){
        event.preventDefault();

        var html=CKEDITOR.instances.description.getSnapshot();

        var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
        var $title = $('<span></span>').addClass('title').text($('#title').val());
        var $description = $('<span></span>').addClass('description').html(html);
        var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
        $('#notifications').append($notification);
        $notification.slideDown(1000);

        $closeButton.click(function(){
            $(this).parent().slideUp();
        });
    });

});