Question

我有一个div，它有一些填充，边框和样式。在div中我只有一些纯文本。像这样：

<div id=test style="border: 2px solid black; background-color: blue;">
    The text I would like to animate
</div>

通常要为内容制作动画，我会做这样的事情：

$('#test > *').hide(1000);

但显然> *只选择子元素，而不是非元素（例如文本）

所以我目前的工作是：

<div id=test style="border: 2px solid black; background-color: blue;">
    <span>The text I would like to animate</span>
</div>

制作一个并非真正需要的span。

Answer 1

使用.contents（）

$('#test').contents().hide(1000);

修改

此解决方案无法工作的原因是因为父div元素的“内容”是文本节点，而不是DOM节点（span，div，p等等）。因此，它们没有.hide（）和.show（）函数使用的css属性“display”和其他与DOM相关的属性。

正如我在评论中指出的那样，无论如何将文本内容包装在内联DOM元素中通常都是一个好主意，无论你是否需要操作它们。

Answer 2

好的，我以为我会再次尝试......

    $('#test').wrapInner('<span></span>').contents().hide(1000);

虽然在所有现实中都会动态地将内容包装在span标记中，但它会阻止您将span标记放在标记中。我相信这会实现你的目标

JQuery：对元素的内容运行动画

2 个答案: