2

我正在使用this answer中的一种技术来使用jQuery淡入附加元素：

$(html).hide().appendTo("#mycontent").fadeIn(1000);

并尝试将其应用于文档片段：

var docfrag = document.createDocumentFragment(),
    div = document.createElement('div');

div.textContent = 'Fade This In';
docfrag.appendChild(div);

但是当我尝试淡入片段时：

$(docfrag).hide().appendTo('#container').fadeIn();

我从 jQuery 得到这个错误：

Uncaught TypeError: Cannot set property 'cur' of undefined

有谁知道如何淡入文档片段？

--

试图淡入附加的列表项？请参阅下面的答案。

4

2 回答 2

1

$('docfrag')是一个 DocumentFragment，它没有hide().

这是 jsFiddle 中修改后的代码：link

原因：

DocumentFragments 是 DOM 节点。它们在创建时就在内存中，而不是主 DOM 树的一部分。这意味着 jQuery 选择器不会按预期返回 DOM 元素。

于 2013-09-29T02:00:22.227 回答
0

我没有在我的问题中指定这一点，但我附加的文档片段是一系列列表项。

由于该列表已经与其他项目一起呈现，因此我无法像Blaise和adeneo在他们的小提琴中那样淡入容器 div。

淡入容器<ul>意味着淡出整个列表，包括已经存在的项目。而且我不能只为新的列表项添加另一个容器，而不会破坏标记或使它变得非常混乱。

我的解决方案有点骇人听闻，但可以完成工作。这是针对 Backbone.js 应用程序的，因此这里的代码被简化（并且丑陋）以在没有所有 Backbone 内容的情况下获得基本要点。

var docfrag = document.createDocumentFragment(),
    item1 = document.createElement('li'),
    item2 = document.createElement('li');

item1.textContent = 'New List Item 1';
item2.textContent = 'New List Item 2';

docfrag.appendChild(item1);
docfrag.appendChild(item2);

$item1 = $(item1);
$item2 = $(item2);

$item1.addClass('hidden').hide();
$item2.addClass('hidden').hide();

$('#button').on('click', function() {
    $(docfrag).appendTo('#list');
    $('#list').find('.hidden').fadeIn();
});

一旦 jQuery 可以访问新的列表项（在我的例子中，render()在它们的 Backbone 视图上运行之后），我隐藏它们并添加一个类挂钩以便稍后淡入它们。

于 2013-09-29T04:26:03.157 回答