JQuery: Run animations on the element's contents

I have a div that has some padding, border, and style applied to it. Inside the div I have just some plain text. Something like this:

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

Normally 开发者_如何学Pythonto animate the contents I would do something like this:

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

But apparently the > * only selects child elements, and not non-elements (text for example)

So my current work around is:

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

Making a span that is not really needed.

Ok, thought I'd take another stab at this...

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

while in all reality does dynamically wrap the contents in a span tag, it prevents you from having to place the span tag in your markup. Which I believe accomplishes your goal

use .contents()

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

EDIT:

The reason this solution is not working is because the "contents" of the parent div element are text nodes, not DOM nodes(span,div,p,etc...). Therefore, they do not have the css property "display" and other DOM related properties that the .hide() and .show() function work with.

As I pointed out in the comments, it is generally a good idea anyway to wrap text content in in-line DOM element, regardless of your need to manipulate them.