JQuery: запускать анимацию содержимого элемента

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

Хорошо, подумал, что я сделаю еще один удар в этом ...

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

в то время как во всей реальности динамически переносит содержимое в тег span, вам не нужно помещать тег span в разметку Который я верю, достигает вашей цели

Answer 2

use .contents ()

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

EDIT:

Причина, по которой это решение не работает, заключается в том, что "содержимое" родительского элемента divтекстовые узлы, а не узлы DOM (span, div, p и т. д.).Следовательно, у них нет свойства css «display» и других связанных с DOM свойств, с которыми работают функции .hide () и .show ().

Как я указывал в комментариях, обычно этоВ любом случае, хорошая идея - оборачивать текстовое содержимое в встроенный элемент DOM, независимо от необходимости манипулировать ими.