jQuery prepend和fadeIn

时间:2015-09-27 22:45:13

标签: jquery ajax

当用户发布状态时,我会在Feed页面的顶部显示该状态。我想添加一个淡入淡出效果,但我写的脚本隐藏了所有更新并再次显示。我希望这仅适用于最新状态。

它出了什么问题?

HTML

<div class="col-md-12" id="sharing">
</div>

JS

$("#sharenow").click(function () {
        var formData = {
            'text': $("#update-text").val()
        };

        $("#update-text").val('');

        $.ajax({
            type: 'POST',
            url: '/newstatus',
            data: formData,
            dataType: 'json',
            encode: true
        })

            .done(function (data) {
                if (data.success) {
                    $("#sharing").prepend('<div class="row posts">'+data.comment+'</div>').hide().fadeIn(1500);
                }
            });

    });
});

2 个答案:

答案 0 :(得分:3)

您想使用.prependTo()

$('<div class="row posts">'+data.comment+'</div>').prependTo("#sharing").hide().fadeIn(1500);

根据经验,JQuery总是返回所选第一个东西的包装器,所以在这种情况下你希望它返回新的添加,而不是$("#sharing")

答案 1 :(得分:1)

从“prepend”命令返回的jQuery元素是$(“#sharing”),因此以下所有方法都对它进行操作(而不是添加的注释)。

尝试创建一个包含隐藏注释jQuery的变量,并将您的调用分离为“prepend”调用,然后再调用fadeIn调用:

var comment=$('<div class="row posts">'+data.comment+'</div>').hide();  
$("#sharing").prepend(comment);
comment.fadeIn(1500);