Question

when the page loads i would like the span overlay to fade in from full #000 to opacity 0.2
and then stay at 0.2 to which when i hover it goes to opacity 0

this is the code i have at the moment

$(function () {
    $('ul li a').append('<span id="load"></span>');
    $('span').css('display', 'block').fadeOut(3400);

    $('span') .animate ({
            "opacity" : .2
    });

    $('span') .hover(function() {
        $ (this) .animate ({"opacity": 0});
    }, function () {
        $(this).stop() .animate ({"opacity": .2 });
    });
});

here is an example

http://satbulsara.com/experiment-04/

Answer 1

Something like this?

$(function () {

    var animateDuration = 2000;

    /* this is actually a no-no since you should only use an ID for a 
       single element on the page - you should use a class instead */
    $('ul li a').append('<span id="load"></span>');

    /* I'm not sure I understood you correctly, but it sounds like
       you want to do something like: */
    $('span').css({
        display:'block', 
        opacity: 0.9
    }).animate({
        opacity: 0.2
    }, animateDuration);
    /* It causes the element to have an opacity 0f 0.9 when the
       page loads and then start animating to opacity 0.2 */


    $('span') .hover(function() {
        $ (this) .animate ({"opacity": 0}, animateDuration);
    }, function () {
        $(this).stop() .animate ({"opacity": .2 }, animateDuration);
    });
});