Help with fading in list on page load

So I've been trying to fade in a list of 4 links on page load, vertically one after the other with a delay in between using:

$(document).ready(function() {
     function fadeItem() {
          $('ul li:hidden:first').delay(500).fadeIn(fadeItem);

links in list are currently not effected by the above script on page load.

My problem, I think, is that I have each item in the list individually positioned with an absolute value

or,

I already have a script running involving the li classes I'm trying to consecutively fade 开发者_Python百科causing a conflict between the two scripts.

The jQuery script I'm already running with no problems:

<script type>
$(document).ready(function() {
    $('#thumb ul li a').hover(
            function() {
                var currentBigImage = $('#gallery img').attr('src');
                var newBigImage = $(this).attr('src');
                var currentThumbSrc = $(this).attr('rel');
                switchImage(newBigImage, currentBigImage, currentThumbSrc);
            },
            function() {}
        );
    function switchImage(imageHref, currentBigImage, currentThumbSrc) {
            var theBigImage = $('#gallery img');
            if (imageHref != currentBigImage) {
                theBigImage.fadeOut(250, function(){
                    theBigImage.attr('src', imageHref).fadeIn(250);
                    var newImageDesc = $("#thumb ul li a img[src='"+currentThumbSrc+"']").attr('alt');
                    $('p#desc').empty().html(newImageDesc);
                });
            }
        }
});
</script> 

I'm still getting used to jQuery so the script in question might be totally wrong. From what I understand, $(document).ready(function() { loads items first then carries out the function(s). If there is a better way of fading in li classes on page load, any help would be greatly appreciated, thanks.

You're defining fadeItem() in that document ready, but since you didn't paste the whole thing, I'm not sure you are ever actually calling it? Calling fadeItem() from the document ready should suffice to kick the process into gear.

It might be easier to just write:

// $(fn) is an alias for $(document).ready(fn)
$(function fadeItem() {
   $("ul li:hidden:first").delay(500).fadeIn(fadeItem);
});

That way the function is called on document ready, and can still call itself.

Also, considering your response in some of the comments - the :hidden selector will only find elements that are display: none, or a width and height of 0 (and input hidden, but that doesn't apply to ul li.)

You might need to actually HIDE the items before you search for hidden items...

If you want your function fadeItem() to be executed on document ready, you must also execute it instantly. Have you tried this (why did you pass fadeIitem function as a parameter to fadeIn()? The first parameter should be the duration of the fading):

 function fadeItem() {
      $('ul li:hidden:first').delay(500).fadeIn(400);
 }();//execute the function

Otherwise don't put the fading inside a function.

$(document).ready(function() {
          $('ul li:hidden:first').delay(500).fadeIn(400);

From the comments it seems like this is just a misunderstanding, .fadeIn() won't have an effect on an already 100% visible element, you need to .hide() the element first, something like this:

$(document).ready(function() {
   $('ul li').hide();
   function fadeItem() {
      $('ul li:hidden:first').delay(500).fadeIn(fadeItem);

You could do this in CSS, but I recommend against it, since this will let your non-JS users see the list items, instead of having them hidden and stay hidden via CSS.