CODEWITHSUNDEEP
jqueryhidejquery-animateselector
ParoX
ParoX

Reputation: 5933

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 to 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.

Upvotes: 0

Views: 78

Answers (2)

jondavidjohn
jondavidjohn

Reputation: 62402

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

Upvotes: 1

jondavidjohn
jondavidjohn

Reputation: 62402

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.

Upvotes: 1

Related Questions