jQuery, display first element in a <ul>

I am using this JavaScript code to display tweets from twitter:

http://jsfiddle.net/mLwjA/

I want to display one tweet at a time. I can't seem to select the first list item. I tried

$("ul#twitter_update_list li:first")开发者_如何学运维.fadeIn(1000);

but that didnt work either! I need to know how to fadeOut that first tweet and then fade in the second one.

Any suggestions on how to resolve this?

@thegreyspot: Just change numTweets to 1..?

$(document).ready(function() {
    $("#twitter").getTwitter({
        userName: "thewhitespot",
        numTweets: 1,
        loaderText: "Loading tweets...",
        slideIn: true,
        showHeading: false,
        headingText: "Latest Tweets",
        showProfileLink: false
    });
});

Update

Working example that fades in each item sequentially: http://jsfiddle.net/SWvPS/1/

Another update

Fades in first item then slides it up, then fades in second item before sliding it up as well: http://jsfiddle.net/ErcNA/2/

EDIT: To more directly answer your question, to fade in sequentially, do this:

$("ul#twitter_update_list li").each(function(i) {
    $(this).delay( i * 1000).fadeIn(1000); 
});

This uses delay()^(docs) inside an each()^(docs) loop, utilizing the index parameter in the callback to delay the fadeIn()^(docs) of each item by i * 1000 milliseconds.

Original answer:

Couple problems with your jsfiddle example:

• You need to choose the jQuery library from the menu on the left. You currently have MooTools selected.

• You are adding the getTwitter plugin at window.onload, but calling the plugin as the page loads. As such, the plugin doesn't exist when you're calling it.

Here's your example, placing your code after the getTwitter plugin, and choosing jQuery and onDomReady from the menus on the left.

Example: http://jsfiddle.net/mLwjA/12/

Try $("ul#twitter_update_list li:first-child")

You can also try this:

$("ul#twitter_update_list li").eq(0).fadeIn(1000);