Question

我正在使用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

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

-

尝试淡化附加的列表项？请参阅下面的answer。

Answer 1

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

以下是jsFiddle：link

中的修订代码

原因：

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

Answer 2

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

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

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

我的solution有点黑客但是完成了工作。这是针对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可以访问新的列表项（在我的情况下，在他们的Backbone视图上运行render()之后），我隐藏它们并添加一个类钩子以便稍后淡出它们。

淡入文档片段

2 个答案: