jQuery: slide a new item into the top of a set of items

Semi-newbie to jQuery; just can't quite get this...

I have a list of items on a page, and I want to insert a new item at the top of the list by (a) sliding the existing items down and (b) fading the new item into its position at the t开发者_StackOverflowop of the list. I can get the new item inserted into the list, but so far all the effects I've gotten to work are things like $('#theList').prepend(theNewItem).hide().fadeIn(1000);, which fades in the entire set of items, including the new one, and doesn't do anything about the sliding.

Of course (?), part of my problem is that I need to be applying the .fadeIn (and, presumably, the .slideUp) methods to the new item, not the whole list, but I can't seem to get my hands on it. I can get the ID of the new item, but it's not showing up in the DOM after the prepend (at least, console.log('#theNewItemsID') is returning an empty list).

Any advice out there? Thanks much!

---

How about

$('#theList').prepend(theNewItem).children(':first').hide().fadeIn(1000);

Demo: http://jsfiddle.net/gaby/CrjQF/

---

Alternative

If the variable theNewItem holds a jQuery object then you can also use the .prependTo()^docs method to skip the filtering

theNewItem.prependTo('#theList').hide().fadeIn(1000);

demo: http://jsfiddle.net/gaby/CrjQF/1/

---

Explanation

It happend because your initial selector is the #theList so the chained commands refer to that. Using the .children()^docs method combined with :first^docs selector we reduce the selected items to the first child of #theList (the newly added)