Question

这应该很简单，但我在google上查了一下，但没有找到任何相关信息。

我在做：

        $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不起作用的原因是因为元素在您追加时可见

DEMO

另请注意，当您滑动通知时，您应将其删除，因为否则您将收到多个通知

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

Answer 2

slideDown文档说：

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

此处函数在滑动完成时执行。所以你需要追加隐藏元素然后slidDown来显示。

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

Here is demo

Answer 3

您有两个小问题，首先需要隐藏.notification元素才能slideDown()。

.notification{
    display: none;
}

其次，在动画完成之前，您试图在一个不存在的元素中设置动画：）

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

下面更新了脚本。 PS：不要忘记添加CSS snipplet。

$(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();
        });
    });

});

.slideDown（）不起作用

3 个答案: