jQuery 直接加载到容器中，加载时淡入答案

【问题标题】：jQuery Load directly into container, fadeIn when loadedjQuery 直接加载到容器中，加载时淡入
【发布时间】：2023-04-02 19:00:01
【问题描述】：

我想通过 Ajax 将一些内容直接加载到目标容器中。

var theData = $('<div id="tempcontainer">').load('/'+targetProject + ' #containerUID' + targetProject);                 
$( theData ).prependTo( '#targetContainer' );

这会将数据加载到我的#targetContainer，但给我留下了一个不必要的#tempcontainer。因为我想将多个项目加载到我的 #targetContainer 中，所以我不能有重复的 #tempcontainers。

我想要实现的是将加载的数据隐藏到我的#targetContainer 中而没有重复的#tempcontainers（完全避免它会更好），测量它的高度（如果可能的话隐藏），调用一些函数并在内容加载后淡入。

提前致谢！

您好，克纳尔。

【问题讨论】：

标签： jquery load fadein

【解决方案1】：

load() 只是$.get 的方便快捷方式，因此如果将数据存储在变量中，$.get 可能更合适。然后只是隐藏内容，添加它并淡入。我以不同的顺序来避免一些问题，但这没关系：

$.get('/'+targetProject , function(data) {
    $( data ).find('#containerUID' + targetProject)
             .hide()
             .fadeIn()
             .prependTo( '#targetContainer' );
});

【讨论】：

听起来不错，谢谢！！你能解释一下为什么你先fadeIn然后prepend？
fadeIn 有点异步，所以它不会停止 prependTo 的执行，而且速度如此之快，你永远不会注意到差异。这样做的原因是，我似乎遇到了先附加/前置，然后不时淡入的问题，这种方式似乎总能解决这些问题，所以我刚刚习惯了这个顺序，据我所知，它总是按预期工作。
在测试解决方案时，我注意到get 不只返回所需的元素，用#containerUID 表示，而load 尊重这个请求。有什么线索吗？
@knalpiap - 是的，load() 在内部使用find()。它获取所有内容，然后将内容过滤为方便。改变了答案，这几乎完全一样。