How can I apply effects to retrieved elements within an array in jQuery?

Question

I was wondering if it was possible to apply effects to retrieved elements within an array.

I know I can output the contents of the array via the: .text() or the .html() functions in jQuery. But I have been trying to fadeIn() the content, and it never works.

How can I accomplish this?

Answer 1

You must add the object into the DOM before you can show it and use effects on it.

For example:

content.appendTo('#somedivid').hide().fadeIn();

Answer 2

You'll have to append it to the dom, hide it and then fade it in:

for(i=0, x=content.length; i<x; i++){      
   $('<p />').text(content[i]).appendTo('#container').hide().fadeIn();
}

Asuming that content is the array of text you you want to add to #container.

Answer 3

If each element in the array contain an id which is associated to the element on the page layout you can do:

$('#'+content[i].id).fadeIn();

Answer 4

I'm not sure I understand the question correctly, but it works the same as with the text() or html() functions you mentioned:

var elements = $('.test');
// elements is an array of all elements with class 'test'

// now fade all these elements out:
elements.fadeOut('slow');