jQuery .after 生效答案

【问题标题】：jQuery .after with effectjQuery .after 生效
【发布时间】：2011-09-14 12:09:30
【问题描述】：

我想问一下，是否可以使用 .after 函数与诸如 fadeIn 之类的效果相关联。

整个流程应该是这样的：

获取一些 AJAX 内容取决于用户操作（.click 左右）
在当前元素之后立即呈现响应 html

我已经尝试混合使用 .get、.after、.show 或 .fadeIn 方法，但没有成功。

非常感谢任何帮助。

【问题讨论】：

@show 一些你尝试过的代码
你有代码吗？您需要有一个要附加到的元素。不过，我不确定您是如何尝试的。你是在ajax的success方法中做$(element).after(data)还是什么？

标签： jquery

【解决方案1】：

很简单

jQuery.ajax({
url:"//Your URL//"
success: function(response){
jQuery(".defineYOURSELECTOR").after(jQuery(response).fadeIn());
}
});

【讨论】：

【解决方案2】：

当然，您可以简单地在回调中执行此操作：

$.ajax({
   type: 'get',
   url: 'Some\Url',
   data: { prop: 'someData' },
   success: function(response)
   {
        var element = $('<div/>');
        element.html(response);
        element.hide();

        $('#someElement').after(element);
        element.fadeIn();
   }
});

获取数据。设置 UI，插入隐藏的，然后在该项目上调用 FadeIn。

【讨论】：

【解决方案3】：

没有本地方法可以做到这一点，但是这个怎么样......

var target = $('#someEl'); // existing element
$.get('example.php', function(response) {
    var newEl = $(response);
    newEl.hide().insertAfter(target).slideDown('slow');
});

这使用了以下 jQuery 函数：

基本上，这个想法是在将元素插入文档之前构造元素（使用jQuery constructor $），然后插入它，然后显示它。

【讨论】：

非常感谢你们所有人。 lonesomeday 解决方案很有魅力。谢谢！

【解决方案4】：

你应该可以这样做：

$('<div></div>').hide().html(ajaxResult).insertAfter(target).fadeIn();

ajaxResult 是从服务器返回的 HTML，target 是您的“当前”元素（之后将插入新元素）。

【讨论】：